@sanity/color-input 2.34.2-empty-template-cli.0 → 2.34.3-cdr-preview.7

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.
package/lib/ColorInput.js CHANGED
@@ -4,34 +4,21 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
9
-
10
8
  var _react = _interopRequireWildcard(require("react"));
11
-
12
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
-
14
10
  var _formBuilder = require("part:@sanity/form-builder");
15
-
16
11
  var _ui = require("@sanity/ui");
17
-
18
12
  var _icons = require("@sanity/icons");
19
-
20
13
  var _components = require("@sanity/base/components");
21
-
22
14
  var _ColorPicker = _interopRequireDefault(require("./ColorPicker"));
23
-
24
15
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
-
26
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
-
28
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
29
-
30
18
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
31
-
32
19
  var set = _formBuilder.patches.set,
33
- unset = _formBuilder.patches.unset,
34
- setIfMissing = _formBuilder.patches.setIfMissing;
20
+ unset = _formBuilder.patches.unset,
21
+ setIfMissing = _formBuilder.patches.setIfMissing;
35
22
  var DEFAULT_COLOR = {
36
23
  hex: '#24a3e3',
37
24
  hsl: {
@@ -54,17 +41,14 @@ var DEFAULT_COLOR = {
54
41
  },
55
42
  source: 'hex'
56
43
  };
57
-
58
44
  class ColorInput extends _react.PureComponent {
59
45
  constructor() {
60
46
  super(...arguments);
61
-
62
47
  _defineProperty(this, "focusRef", /*#__PURE__*/_react.default.createRef());
63
-
64
48
  _defineProperty(this, "emitSetColor", nextColor => {
65
49
  var _this$props = this.props,
66
- onChange = _this$props.onChange,
67
- type = _this$props.type;
50
+ onChange = _this$props.onChange,
51
+ type = _this$props.type;
68
52
  var fieldPatches = type.fields.filter(field => field.name in nextColor).map(field => {
69
53
  var nextFieldValue = nextColor[field.name];
70
54
  var isObject = field.type.jsonType === 'object';
@@ -76,31 +60,26 @@ class ColorInput extends _react.PureComponent {
76
60
  _type: type.name
77
61
  }), set(type.name, ['_type']), set(nextColor.rgb.a, ['alpha']), ...fieldPatches]));
78
62
  });
79
-
80
63
  _defineProperty(this, "handleColorChange", (0, _debounce2.default)(this.emitSetColor, 100));
81
-
82
64
  _defineProperty(this, "handleCreateColor", () => {
83
65
  this.emitSetColor(DEFAULT_COLOR);
84
66
  });
85
-
86
67
  _defineProperty(this, "handleUnset", () => {
87
68
  this.props.onChange(_formBuilder.PatchEvent.from(unset()));
88
69
  });
89
70
  }
90
-
91
71
  focus() {
92
72
  // todo: make the ColorPicker component support .focus()
93
73
  if (this.focusRef.current && this.focusRef.current.focus) {
94
74
  this.focusRef.current.focus();
95
75
  }
96
76
  }
97
-
98
77
  render() {
99
78
  var _this$props2 = this.props,
100
- type = _this$props2.type,
101
- readOnly = _this$props2.readOnly,
102
- value = _this$props2.value,
103
- level = _this$props2.level;
79
+ type = _this$props2.type,
80
+ readOnly = _this$props2.readOnly,
81
+ value = _this$props2.value,
82
+ level = _this$props2.level;
104
83
  return /*#__PURE__*/_react.default.createElement(_components.FormField, {
105
84
  title: type.title,
106
85
  description: type.description,
@@ -121,11 +100,8 @@ class ColorInput extends _react.PureComponent {
121
100
  onClick: this.handleCreateColor
122
101
  }));
123
102
  }
124
-
125
103
  }
126
-
127
104
  exports.default = ColorInput;
128
-
129
105
  _defineProperty(ColorInput, "propTypes", {
130
106
  type: _propTypes.default.shape({
131
107
  name: _propTypes.default.string,
@@ -4,41 +4,29 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = _interopRequireDefault(require("react"));
9
-
10
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
9
  var _common = require("react-color/lib/components/common");
13
-
14
10
  var _ui = require("@sanity/ui");
15
-
16
11
  var _icons = require("@sanity/icons");
17
-
18
12
  var _styledComponents = _interopRequireDefault(require("styled-components"));
19
-
20
13
  var _ColorPickerFields = require("./ColorPickerFields");
21
-
22
14
  var _templateObject, _templateObject2;
23
-
24
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
-
26
16
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
27
-
28
17
  var ColorBox = (0, _styledComponents.default)(_ui.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
29
18
  var ReadOnlyContainer = (0, _styledComponents.default)(_ui.Flex)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-top: 6rem;\n background-color: var(--card-bg-color);\n position: relative;\n width: 100%;\n"])));
30
-
31
19
  var ColorPicker = _ref => {
32
20
  var width = _ref.width,
33
- rgb = _ref.rgb,
34
- hex = _ref.hex,
35
- hsv = _ref.hsv,
36
- hsl = _ref.hsl,
37
- onChange = _ref.onChange,
38
- onUnset = _ref.onUnset,
39
- disableAlpha = _ref.disableAlpha,
40
- renderers = _ref.renderers,
41
- readOnly = _ref.readOnly;
21
+ rgb = _ref.rgb,
22
+ hex = _ref.hex,
23
+ hsv = _ref.hsv,
24
+ hsl = _ref.hsl,
25
+ onChange = _ref.onChange,
26
+ onUnset = _ref.onUnset,
27
+ disableAlpha = _ref.disableAlpha,
28
+ renderers = _ref.renderers,
29
+ readOnly = _ref.readOnly;
42
30
  return /*#__PURE__*/_react.default.createElement("div", {
43
31
  style: {
44
32
  width
@@ -137,7 +125,6 @@ var ColorPicker = _ref => {
137
125
  tone: "critical"
138
126
  })))))));
139
127
  };
140
-
141
128
  ColorPicker.propTypes = {
142
129
  width: _propTypes.default.string,
143
130
  hex: _propTypes.default.string,
@@ -153,7 +140,5 @@ ColorPicker.propTypes = {
153
140
  ColorPicker.defaultProps = {
154
141
  disableAlpha: false
155
142
  };
156
-
157
143
  var _default = (0, _common.ColorWrap)(ColorPicker);
158
-
159
144
  exports.default = _default;
@@ -4,31 +4,21 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = exports.ColorPickerFields = void 0;
7
-
8
7
  var _react = _interopRequireDefault(require("react"));
9
-
10
8
  var color = _interopRequireWildcard(require("react-color/lib/helpers/color"));
11
-
12
9
  var _common = require("react-color/lib/components/common");
13
-
14
10
  var _ui = require("@sanity/ui");
15
-
16
11
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
-
18
12
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
-
20
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
-
22
14
  var ColorPickerFields = _ref => {
23
15
  var onChange = _ref.onChange,
24
- rgb = _ref.rgb,
25
- hsl = _ref.hsl,
26
- hex = _ref.hex,
27
- disableAlpha = _ref.disableAlpha;
28
-
16
+ rgb = _ref.rgb,
17
+ hsl = _ref.hsl,
18
+ hex = _ref.hex,
19
+ disableAlpha = _ref.disableAlpha;
29
20
  var _useTheme = (0, _ui.useTheme)(),
30
- sanity = _useTheme.sanity;
31
-
21
+ sanity = _useTheme.sanity;
32
22
  var inputStyles = {
33
23
  input: {
34
24
  width: '80%',
@@ -50,7 +40,6 @@ var ColorPickerFields = _ref => {
50
40
  textTransform: 'capitalize'
51
41
  }
52
42
  };
53
-
54
43
  var handleChange = (data, e) => {
55
44
  if (data.hex && color.isValidHex(data.hex)) {
56
45
  onChange({
@@ -71,7 +60,6 @@ var ColorPickerFields = _ref => {
71
60
  } else if (data.a > 100) {
72
61
  data.a = 100;
73
62
  }
74
-
75
63
  data.a /= 100;
76
64
  onChange({
77
65
  h: hsl.h,
@@ -82,7 +70,6 @@ var ColorPickerFields = _ref => {
82
70
  }, e);
83
71
  }
84
72
  };
85
-
86
73
  return /*#__PURE__*/_react.default.createElement(_ui.Flex, null, /*#__PURE__*/_react.default.createElement(_ui.Box, {
87
74
  flex: 2,
88
75
  marginRight: 1
@@ -132,7 +119,6 @@ var ColorPickerFields = _ref => {
132
119
  dragMax: "100"
133
120
  })));
134
121
  };
135
-
136
122
  exports.ColorPickerFields = ColorPickerFields;
137
123
  var _default = ColorPickerFields;
138
124
  exports.default = _default;
@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = _interopRequireDefault(require("react"));
9
-
10
8
  var _ColorInput = _interopRequireDefault(require("../ColorInput"));
11
-
12
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
10
  /* eslint-disable react/display-name */
15
- var round = val => Math.round(val * 100);
16
11
 
12
+ var round = val => Math.round(val * 100);
17
13
  var _default = {
18
14
  name: 'color',
19
15
  type: 'object',
@@ -47,18 +43,15 @@ var _default = {
47
43
  hex: 'hex',
48
44
  hsl: 'hsl'
49
45
  },
50
-
51
46
  prepare(_ref) {
52
47
  var title = _ref.title,
53
- hex = _ref.hex,
54
- hsl = _ref.hsl,
55
- alpha = _ref.alpha;
48
+ hex = _ref.hex,
49
+ hsl = _ref.hsl,
50
+ alpha = _ref.alpha;
56
51
  var subtitle = hex || 'No color set';
57
-
58
52
  if (hsl) {
59
53
  subtitle = "H:".concat(round(hsl.l), " S:").concat(round(hsl.l), " L:").concat(round(hsl.l), " A:").concat(round(alpha));
60
54
  }
61
-
62
55
  return {
63
56
  title: title,
64
57
  subtitle: subtitle,
@@ -75,7 +68,6 @@ var _default = {
75
68
  })
76
69
  };
77
70
  }
78
-
79
71
  }
80
72
  };
81
73
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sanity/color-input",
3
- "version": "2.34.2-empty-template-cli.0+184a9350e5",
3
+ "version": "2.34.3-cdr-preview.7+0d661c122",
4
4
  "description": "Color input",
5
5
  "main": "lib/index.js",
6
6
  "author": "Sanity.io <hello@sanity.io>",
@@ -24,8 +24,8 @@
24
24
  "react-color": "^2.13.8"
25
25
  },
26
26
  "devDependencies": {
27
- "@sanity/base": "2.34.2-empty-template-cli.0+184a9350e5",
28
- "@sanity/types": "2.34.2-empty-template-cli.0+184a9350e5",
27
+ "@sanity/base": "2.34.3-cdr-preview.7+0d661c122",
28
+ "@sanity/types": "2.34.3-cdr-preview.7+0d661c122",
29
29
  "react": "17.0.1",
30
30
  "rimraf": "^2.7.1"
31
31
  },
@@ -48,5 +48,5 @@
48
48
  "publishConfig": {
49
49
  "access": "public"
50
50
  },
51
- "gitHead": "184a9350e50aa05877a3b10e052ce4e2ca743ef0"
51
+ "gitHead": "0d661c122864b683c7bfbcb03fddc2407c617ae0"
52
52
  }