@onehat/ui 0.4.13 → 0.4.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/package.json +1 -1
  2. package/src/Components/Buttons/IconButton.js +3 -6
  3. package/src/Components/Editor/InlineEditor.js +2 -2
  4. package/src/Components/Form/Field/Color.js +24 -7
  5. package/src/Components/Form/Field/Combo/Combo.js +14 -27
  6. package/src/Components/Form/Field/Date.js +29 -30
  7. package/src/Components/Form/Field/FormikForm.js +2 -2
  8. package/src/Components/Form/Field/Input.js +3 -7
  9. package/src/Components/Form/Field/Number.js +0 -4
  10. package/src/Components/Form/Field/Select/Select.js +1 -4
  11. package/src/Components/Form/Field/Tag/Tag.js +4 -4
  12. package/src/Components/Form/Field/Tag/ValueBox.js +13 -3
  13. package/src/Components/Form/Field/Text.js +1 -1
  14. package/src/Components/Form/Field/TextArea.js +1 -6
  15. package/src/Components/Form/Field/Toggle.js +1 -1
  16. package/src/Components/Form/FieldSet.js +10 -20
  17. package/src/Components/Form/Form.js +22 -9
  18. package/src/Components/Form/Label.js +2 -1
  19. package/src/Components/Grid/Grid.js +12 -5
  20. package/src/Components/Grid/GridHeaderRow.js +5 -7
  21. package/src/Components/Grid/GridRow.js +9 -7
  22. package/src/Components/Hoc/withContextMenu.js +7 -9
  23. package/src/Components/Hoc/withFilters.js +1 -1
  24. package/src/Components/Layout/Footer.js +1 -1
  25. package/src/Components/Panel/Header.js +6 -10
  26. package/src/Components/Tab/TabBar.js +3 -3
  27. package/src/Components/Toolbar/Toolbar.js +1 -1
  28. package/src/Components/Tree/TreeNode.js +3 -5
  29. package/src/Components/Viewer/Viewer.js +17 -7
  30. package/src/Constants/Styles.js +62 -76
  31. package/src/PlatformImports/Web/File.js +1 -2
package/src/Constants/Styles.js CHANGED
@@ -9,79 +9,69 @@ const
9
9
 
10
10
  const defaults = {
11
11
  ATTACHMENTS_MAX_FILESIZE: 1024 * 1024 * 5, // 5MB
12
+ CONTEXT_MENU_WIDTH: 180,
13
+ CONTEXT_MENU_ITEM_HEIGHT: 30,
12
14
  DEFAULT_WINDOW_WIDTH: 900,
13
15
  DEFAULT_WINDOW_HEIGHT: 800,
14
- FILTER_LABEL_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
15
- FORM_ANCILLARY_TITLE_FONTSIZE: 'text-[22px]',
16
- FORM_ANCILLARY_DESCRIPTION_FONTSIZE: 'text-[16px]',
17
- FORM_COLOR_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
18
- FORM_COLOR_INPUT_BG: 'bg-' + WHITE,
19
- FORM_COLOR_INPUT_BG_FOCUS: 'focus:bg-' + FOCUS,
20
- FORM_COMBO_HEIGHT: 'h-[40px]',
21
- FORM_COMBO_INPUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
22
- FORM_COMBO_INPUT_BG: 'bg-' + WHITE,
23
- FORM_COMBO_INPUT_BG_FOCUS: 'focus:bg-' + FOCUS,
16
+ FILTER_LABEL_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
17
+ FORM_ANCILLARY_TITLE_CLASSNAME: 'text-[22px]',
18
+ FORM_ANCILLARY_DESCRIPTION_CLASSNAME: 'text-[16px]',
19
+ FORM_COLOR_INPUT_CLASSNAME: 'text-' + DEFAULT_FONTSIZE + ' ' +
20
+ 'bg-' + WHITE + ' ' +
21
+ 'focus:bg-' + FOCUS,
22
+ FORM_COMBO_INPUT_CLASSNAME: 'text-' + DEFAULT_FONTSIZE + ' ' +
23
+ 'bg-' + WHITE + ' ' +
24
+ 'focus:bg-' + FOCUS,
24
25
  FORM_COMBO_MENU_HEIGHT: 250,
25
26
  FORM_COMBO_MENU_MIN_WIDTH: 250,
26
- FORM_COMBO_TRIGGER_BG: 'bg-' + WHITE,
27
- FORM_COMBO_TRIGGER_BG_HOVER: 'hover:bg-grey-300',
28
- FORM_DATE_ICON_BG: 'bg-primary-200',
29
- FORM_DATE_ICON_BG_HOVER: 'hover:bg-primary-400',
30
- FORM_DATE_ICON_COLOR: 'text-' + WHITE,
31
- FORM_DATE_INPUT_BG: 'bg-' + WHITE,
32
- FORM_DATE_INPUT_BG_FOCUS: 'focus:bg-' + FOCUS,
33
- FORM_DATE_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
27
+ FORM_COMBO_TRIGGER_CLASSNAME: 'bg-' + WHITE + ' ' +
28
+ 'hover:bg-grey-300',
29
+ FORM_DATE_CLASSNAME: 'h-[40px]',
30
+ FORM_DATE_TRIGGER_CLASSNAME: 'bg-primary-200 ' +
31
+ 'hover:bg-primary-400',
32
+ FORM_DATE_TRIGGER_ICON_CLASSNAME: 'text-' + WHITE,
33
+ FORM_DATE_INPUT_CLASSNAME: 'bg-' + WHITE + ' ' +
34
+ 'focus:bg-' + FOCUS + ' ' +
35
+ 'text-' + DEFAULT_FONTSIZE,
34
36
  FORM_FIELDSET_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
35
37
  FORM_FIELDSET_BG: 'bg-[#f6f6f6]',
36
- FORM_FILE_ICON_BG: 'bg-primary-200',
37
- FORM_FILE_ICON_BG_HOVER: 'hover:bg-primary-400',
38
- FORM_FILE_ICON_COLOR: 'text-' + WHITE,
39
- FORM_FILE_INPUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
40
- FORM_FILE_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
41
- FORM_FILE_READOUT_BG: 'bg-' + WHITE,
42
- FORM_INPUT_BG: 'bg-' + WHITE,
43
- FORM_INPUT_BG_FOCUS: 'focus:bg-' + FOCUS,
44
- FORM_INPUT_BG_HOVER: 'hover:bg-' + HOVER,
45
- FORM_INPUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
46
- FORM_LABEL_WIDTH: '30%',
47
- FORM_LABEL_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
48
- FORM_NUMBER_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
49
- FORM_SELECT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
50
- FORM_SELECT_BG: 'bg-grey-100',
51
- FORM_SELECT_BG_FOCUS: 'focus:bg-' + FOCUS,
52
- FORM_SELECT_BG_HOVER: 'hover:bg-' + HOVER,
53
- FORM_TAG_MB: 'mb-1',
54
- FORM_TAG_MIN_HEIGHT: 'min-h-10',
55
- FORM_TAG_PADDING: 'p-1',
56
- FORM_TAG_VALUEBOX_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
38
+ // FORM_FILE_ICON_BG: 'bg-primary-200',
39
+ // FORM_FILE_ICON_BG_HOVER: 'hover:bg-primary-400',
40
+ // FORM_FILE_ICON_COLOR: 'text-' + WHITE,
41
+ // FORM_FILE_INPUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
42
+ // FORM_FILE_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
43
+ // FORM_FILE_READOUT_BG: 'bg-' + WHITE,
44
+ FORM_INPUT_CLASSNAME: 'bg-' + WHITE + ' ' +
45
+ 'focus:bg-' + FOCUS + ' ' +
46
+ 'hover:bg-' + HOVER,
47
+ FORM_INPUT_FIELD_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
48
+ FORM_LABEL_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
49
+ FORM_SELECT_CLASSNAME: 'text-' + DEFAULT_FONTSIZE + ' ' +
50
+ 'bg-grey-100 ' +
51
+ 'focus:bg-' + FOCUS + ' ' +
52
+ 'hover:bg-' + HOVER,
53
+ FORM_TAG_CLASSNAME: '',
54
+ FORM_TAG_VALUEBOX_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
57
55
  FORM_TAG_VALUEBOX_ICON_SIZE: 'sm',
58
- FORM_TEXT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
59
- FORM_TEXTAREA_BG: 'bg-' + WHITE,
60
- FORM_TEXTAREA_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
61
- FORM_TEXTAREA_HEIGHT: 'h-[130px]',
56
+ FORM_TAG_BTN_CLASSNAME: '',
57
+ FORM_TEXT_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
58
+ FORM_TEXTAREA_CLASSNAME: 'bg-' + WHITE + ' ' +
59
+ 'text-' + DEFAULT_FONTSIZE + ' ' +
60
+ 'h-[130px]',
62
61
  FORM_TOGGLE_BG: null,
63
- FORM_TOGGLE_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
62
+ FORM_TOGGLE_READOUT_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
64
63
  FORM_TOGGLE_SIZE: 'md',
65
64
  FORM_TOGGLE_ON_COLOR: '#0b0',
66
- FORM_TOGGLE_ON_HOVER_COLOR: '#090',
67
65
  FORM_TOGGLE_OFF_COLOR: '#f00',
68
- FORM_TOGGLE_OFF_HOVER_COLOR: '#c00',
69
66
  FORM_ONE_COLUMN_THRESHOLD: 900, // only allow one column in form unless form is wider than this
70
67
  FORM_STACK_ROW_THRESHOLD: 400, // stack labels & fields if row is less than this width
71
- GRID_CELL_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
72
- GRID_CELL_PX: 'px-2',
73
- GRID_CELL_PY: 'py-3',
74
- GRID_HEADER_BG: 'bg-[#eee]',
75
- GRID_HEADER_BG_HOVER: 'hover:bg-[#ddd]',
76
- GRID_HEADER_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
77
- GRID_HEADER_CELL_PX: 'px-2',
78
- GRID_HEADER_CELL_PY: 'py-3',
79
- GRID_HEADER_ICON_MT: 'mt-3',
80
- GRID_HEADER_ICON_MR: 'mt-2',
68
+ GRID_CELL_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
69
+ GRID_EXPAND_BTN_CLASSNAME: '',
70
+ GRID_HEADER_PRESSABLE_CLASSNAME: 'bg-[#eee] ' +
71
+ 'hover:bg-[#ddd]',
72
+ GRID_HEADER_CLASSNAME: 'text-' + DEFAULT_FONTSIZE,
73
+ GRID_HEADER_ICON_CLASSNAME: 'mt-3 mr-2',
81
74
  GRID_HEADER_ICON_SIZE: 'sm',
82
- GRID_INLINE_EDITOR_BORDER_TOP_COLOR: 'border-t-primary-100',
83
- GRID_INLINE_EDITOR_BORDER_BOTTOM_COLOR: 'border-b-primary-100',
84
- GRID_INLINE_EDITOR_BG: 'bg-primary-700',
85
75
  GRID_NAV_COLUMN_COLOR: 'text-grey-400',
86
76
  GRID_ROW_BG: '#fff', // must be hex
87
77
  GRID_ROW_ALTERNATE_BG: '#ddd', // must be hex
@@ -91,25 +81,22 @@ const defaults = {
91
81
  GRID_REORDER_BORDER_COLOR: 'border-[#23d9ea]',
92
82
  GRID_REORDER_BORDER_WIDTH: 'border-4',
93
83
  GRID_REORDER_BORDER_STYLE: 'border-dashed',
94
- ICON_BUTTON_BG: 'bg-grey-100',
95
- ICON_BUTTON_BG_ACTIVE: 'active:bg-grey-900/50',
96
- ICON_BUTTON_BG_DISABLED: 'disabled:bg-grey-200',
97
- ICON_BUTTON_BG_HOVER: 'hover:bg-grey-900/20',
98
- ICON_BUTTON_BG_ACTIVE_HOVER: 'hover:bg-grey-200',
99
- ICON_BUTTON_PX: 'px-[10px]',
100
- ICON_BUTTON_PY: 'py-[10px]',
84
+ ICON_BUTTON_CLASSNAME: 'bg-grey-100 ' +
85
+ 'active:bg-grey-900/50 ' +
86
+ 'disabled:bg-grey-200 ' +
87
+ 'hover:bg-grey-900/20',
101
88
  INLINE_EDITOR_MIN_WIDTH: 'min-w-[150px]',
102
- PANEL_FOOTER_BORDER_TOP_COLOR: 'border-t-primary-300', // :alpha.50
89
+ PANEL_FOOTER_CLASSNAME: 'border-t-primary-300', // :alpha.50
103
90
  PANEL_HEADER_BG: 'bg-primary-500',
104
- PANEL_HEADER_ICON_COLOR: 'text-' + WHITE,
91
+ PANEL_HEADER_ICON_CLASSNAME: 'text-' + WHITE,
105
92
  PANEL_HEADER_ICON_SIZE: 'md',
106
- PANEL_HEADER_TEXT_COLOR: 'text-' + WHITE,
107
- PANEL_HEADER_TEXT_FONTSIZE: 'text-[18px]',
93
+ PANEL_HEADER_TEXT_CLASSNAME: 'text-' + WHITE + ' ' +
94
+ 'text-[18px]',
108
95
  SLIDER_MIN_TRACK_COLOR: '#000',
109
96
  SLIDER_MAX_TRACK_COLOR: '#ccc',
110
97
  SLIDER_THUMB_COLOR: '#000',
111
98
  SLIDER_READOUT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
112
- TAB_BAR_BG: 'bg-grey-300',
99
+ TAB_BAR_CLASSNAME: 'bg-grey-300',
113
100
  TAB_BG: 'bg-grey-300',
114
101
  TAB_BG_ACTIVE: 'active:bg-grey-900/50',
115
102
  TAB_BG_CURRENT: 'bg-grey-0',
@@ -127,17 +114,16 @@ const defaults = {
127
114
  TAB_ICON_COLOR_DISABLED: 'group-disabled/button:text-grey-400',
128
115
  TAB_FONTSIZE: 'text-md',
129
116
  TEXT_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
130
- TREE_NODE_FONTSIZE: 'text-' + DEFAULT_FONTSIZE,
131
- TREE_NODE_PX: 'px-2',
132
- TREE_NODE_PY: 'py-3',
117
+ TREE_NODE_CLASSNAME: 'text-' + DEFAULT_FONTSIZE + ' ' +
118
+ 'px-2 ' +
119
+ 'py-3',
133
120
  TREE_NODE_BG: '#fff', // must be hex
134
121
  TREE_NODE_BG_HOVER: '#cce', // must be hex
135
122
  TREE_NODE_SELECTED_BG: '#ff0', // must be hex
136
123
  TREE_NODE_SELECTED_BG_HOVER: '#cc0', // must be hex
137
124
  TREE_NODE_HIGHLIGHTED_BG: '#0f0', // must be hex
138
- TOOLBAR_BG: 'bg-grey-200',
125
+ TOOLBAR_CLASSNAME: 'bg-grey-200',
139
126
  TOOLBAR_ITEMS_COLOR: 'text-grey-800',
140
- TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled:text-grey-400',
141
127
  TOOLBAR_ITEMS_ICON_SIZE: 'sm',
142
128
  VIEWER_ANCILLARY_FONTSIZE: 'text-[22px]',
143
129
  };
package/src/PlatformImports/Web/File.js CHANGED
@@ -126,8 +126,7 @@ function FileComponent(props) {
126
126
  className={`
127
127
  h-full
128
128
  mr-1
129
- ${styles.FORM_COMBO_TRIGGER_BG}
130
- ${styles.FORM_COMBO_TRIGGER_BG_HOVER}
129
+ ${styles.FORM_COMBO_TRIGGER_CLASSNAME}
131
130
  `}
132
131
  />
133
132
  <Text>{plainFiles[0].name}</Text>