shesha-framework/shesha-reactjs/src/components/entityPicker/styles/styles.ts at f9be522cd92b87bad9f068cd71f735b79cdd6d73 · shesha-io/shesha-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { createStyles, sheshaStyles } from '@/styles';
import { CSSProperties } from 'react';

export const useStyles = createStyles(({ css, cx, prefixCls, token }, { style }: { style?: CSSProperties }) => {
  const pickerEllipsisBtnWidth = "45px";

  const pickerInputGroup = "picker-input-group";
  const pickerInputGroupInput = "picker-input-group-input";
  const pickerInputGroupEllipsis = "picker-input-group-ellipsis";
  const entityPickerModalPagerContainer = "entity-picker-modal-pager-container";

  const shaReactTable = "sha-react-table";
  const shaGlobalTableFilter = "sha-global-table-filter";

  const entityPickerContainer = cx("entity-picker-container", css`
    width: ${style?.width || '100%'};
    .${pickerInputGroup} {
      .${pickerInputGroupInput} {
        width: calc(100% + ${pickerEllipsisBtnWidth});
      }

      .${pickerInputGroupEllipsis} {
        width: ${pickerEllipsisBtnWidth};
      }
    }
      .${pickerInputGroupEllipsis} {
        &:hover {
          border-color: ${token.colorPrimary} !important;
        }
      }

    .global-tablefilter {
      padding-right: unset !important;
    }
  `);

  const entityPickerModal = cx("entity-picker-modal", css`
        .${prefixCls}-modal-body {
          .ant-alert {
            margin-bottom: 8px;
          }
        }
        .${shaGlobalTableFilter} {
          margin: unset !important;
          width: 100%;
          padding: unset;
        }

        .${shaReactTable} {
          margin: unset;
          overflow: auto;
          ${sheshaStyles.thinScrollbars}
        }

        .${entityPickerModalPagerContainer} {
          display: flex;
          justify-content: flex-end;
          margin: ${sheshaStyles.paddingLG}px 0;

          .${prefixCls}-pagination-options-size-changer {
            margin-right: 0 !important;
          }
        }

        .${prefixCls}-modal-footer {
          padding: 12px 24px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          column-gap: 12px;
        }
    `);

  const entitySelect = cx("entity-select", css`
        --ant-color-text: ${style?.color || '#000'} !important;
        width: calc(100% - 32px) !important;
        flex-basis: unset !important;
        &:hover {
                border-color: ${token.colorPrimary} !important;
              }

        .ant-select-selector {
          overflow: auto !important;
          scrollbar-width: thin !important;
          -ms-overflow-style: none !important;
          &::-webkit-scrollbar {
            width: 8px !important;
          }
        }

        .ant-select-selection-overflow-item-suffix {
          display: none !important;
        };

        .ant-select-selector > ant-select-selection-search, ant-select-selection-placeholder {
          border-right: 1px solid #d9d9d9;
          padding: 0 8px !important;
          * {
            font-size: ${style?.fontSize || '14px'} !important;
            font-weight: ${style?.fontWeight} !important;
            color: ${style?.color || '#000'} !important;
            font-family: ${style?.fontFamily || 'inherit'} !important;
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            }
          }

          .ant-select-selection-item {
            font-size: ${style?.fontSize || '14px'} !important;
            font-weight: ${style?.fontWeight} !important;
            color: ${style?.color || '#000'} !important;
            font-family: ${style?.fontFamily || 'inherit'} !important;

          }

      `);

  return {
    entityPickerContainer,
    pickerInputGroup,
    pickerInputGroupInput,
    pickerInputGroupEllipsis,
    entityPickerModalPagerContainer,
    entityPickerModal,
    entitySelect,
  };
});