@panneau/field-toggle 1.0.2-alpha.0 → 1.0.3-alpha.0
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/assets/css/styles.css +1 -0
- package/es/index.js +45 -2
- package/lib/index.js +54 -9
- package/package.json +31 -34
- package/es/ToggleField.js +0 -179
- package/es/vendors.js +0 -9
- package/lib/ToggleField.js +0 -200
- package/lib/vendors.js +0 -25
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.panneau-field-toggle-container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.panneau-field-toggle-container .rc-switch{background-color:#ccc;border:1px solid #ccc;border-radius:20px 20px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;height:22px;line-height:20px;padding:0;position:relative;-webkit-transition:all .3s cubic-bezier(.35,0,.25,1);-o-transition:all .3s cubic-bezier(.35,0,.25,1);transition:all .3s cubic-bezier(.35,0,.25,1);vertical-align:middle;width:44px}.panneau-field-toggle-container .rc-switch-inner{color:#fff;font-size:12px;left:24px;position:absolute;top:0}.panneau-field-toggle-container .rc-switch:after{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:rcSwitchOff;animation-name:rcSwitchOff;-webkit-animation-timing-function:cubic-bezier(.35,0,.25,1);animation-timing-function:cubic-bezier(.35,0,.25,1);background-color:#fff;border-radius:50% 50%;-webkit-box-shadow:0 2px 5px rgba(0,0,0,.26);box-shadow:0 2px 5px rgba(0,0,0,.26);content:" ";cursor:pointer;height:18px;left:2px;position:absolute;top:1px;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:left .3s cubic-bezier(.35,0,.25,1);-o-transition:left .3s cubic-bezier(.35,0,.25,1);transition:left .3s cubic-bezier(.35,0,.25,1);width:18px}.panneau-field-toggle-container .rc-switch:hover:after{-webkit-animation-name:rcSwitchOn;animation-name:rcSwitchOn;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.panneau-field-toggle-container .rc-switch:focus{-webkit-box-shadow:0 0 0 2px #d5f1fd;box-shadow:0 0 0 2px #d5f1fd;outline:none}.panneau-field-toggle-container .rc-switch-checked{background-color:#87d068;border:1px solid #87d068}.panneau-field-toggle-container .rc-switch-checked .rc-switch-inner{left:6px}.panneau-field-toggle-container .rc-switch-checked:after{left:22px}.panneau-field-toggle-container .rc-switch-disabled{background:#ccc;border-color:#ccc;cursor:no-drop}.panneau-field-toggle-container .rc-switch-disabled:after{-webkit-animation-name:none;animation-name:none;background:#9e9e9e;cursor:no-drop}.panneau-field-toggle-container .rc-switch-disabled:hover:after{-webkit-animation-name:none;animation-name:none;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.panneau-field-toggle-container .rc-switch-label{display:inline-block;font-size:14px;line-height:20px;padding-left:10px;pointer-events:none;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;vertical-align:middle;white-space:normal}@-webkit-keyframes panneau-field-toggle-rcSwitchOn{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.25);transform:scale(1.25)}to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes panneau-field-toggle-rcSwitchOn{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.25);transform:scale(1.25)}to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@-webkit-keyframes panneau-field-toggle-rcSwitchOff{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes panneau-field-toggle-rcSwitchOff{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}
|
package/es/index.js
CHANGED
|
@@ -1,2 +1,45 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import Switch from 'rc-switch';
|
|
5
|
+
import React from 'react';
|
|
6
|
+
|
|
7
|
+
var styles = {"container":"panneau-field-toggle-container","rcSwitchOn":"panneau-field-toggle-rcSwitchOn","rcSwitchOff":"panneau-field-toggle-rcSwitchOff"};
|
|
8
|
+
|
|
9
|
+
var propTypes = {
|
|
10
|
+
value: PropTypes.bool,
|
|
11
|
+
name: PropTypes.string,
|
|
12
|
+
className: PropTypes.string,
|
|
13
|
+
onChange: PropTypes.func
|
|
14
|
+
};
|
|
15
|
+
var defaultProps = {
|
|
16
|
+
value: null,
|
|
17
|
+
name: null,
|
|
18
|
+
className: null,
|
|
19
|
+
onChange: null
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
var ToggleField = function ToggleField(_ref) {
|
|
23
|
+
var value = _ref.value,
|
|
24
|
+
name = _ref.name,
|
|
25
|
+
className = _ref.className,
|
|
26
|
+
onChange = _ref.onChange;
|
|
27
|
+
var isTrue = value === true || value === 'true' || value === 1 || value === '1';
|
|
28
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
29
|
+
className: classNames([styles.container, _defineProperty({}, className, className !== null)])
|
|
30
|
+
}, /*#__PURE__*/React.createElement(Switch, {
|
|
31
|
+
name: name,
|
|
32
|
+
checked: isTrue,
|
|
33
|
+
onChange: onChange
|
|
34
|
+
}));
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
ToggleField.propTypes = propTypes;
|
|
38
|
+
ToggleField.defaultProps = defaultProps;
|
|
39
|
+
|
|
40
|
+
var definition = {
|
|
41
|
+
id: 'toggle',
|
|
42
|
+
component: 'Toggle'
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export { ToggleField as default, definition };
|
package/lib/index.js
CHANGED
|
@@ -1,13 +1,58 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
var classNames = require('classnames');
|
|
7
|
+
var PropTypes = require('prop-types');
|
|
8
|
+
var Switch = require('rc-switch');
|
|
9
|
+
var React = require('react');
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
12
|
|
|
12
|
-
var
|
|
13
|
-
|
|
13
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
14
|
+
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
15
|
+
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
16
|
+
var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
|
|
17
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
|
+
|
|
19
|
+
var styles = {"container":"panneau-field-toggle-container","rcSwitchOn":"panneau-field-toggle-rcSwitchOn","rcSwitchOff":"panneau-field-toggle-rcSwitchOff"};
|
|
20
|
+
|
|
21
|
+
var propTypes = {
|
|
22
|
+
value: PropTypes__default["default"].bool,
|
|
23
|
+
name: PropTypes__default["default"].string,
|
|
24
|
+
className: PropTypes__default["default"].string,
|
|
25
|
+
onChange: PropTypes__default["default"].func
|
|
26
|
+
};
|
|
27
|
+
var defaultProps = {
|
|
28
|
+
value: null,
|
|
29
|
+
name: null,
|
|
30
|
+
className: null,
|
|
31
|
+
onChange: null
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
var ToggleField = function ToggleField(_ref) {
|
|
35
|
+
var value = _ref.value,
|
|
36
|
+
name = _ref.name,
|
|
37
|
+
className = _ref.className,
|
|
38
|
+
onChange = _ref.onChange;
|
|
39
|
+
var isTrue = value === true || value === 'true' || value === 1 || value === '1';
|
|
40
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
41
|
+
className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
|
|
42
|
+
}, /*#__PURE__*/React__default["default"].createElement(Switch__default["default"], {
|
|
43
|
+
name: name,
|
|
44
|
+
checked: isTrue,
|
|
45
|
+
onChange: onChange
|
|
46
|
+
}));
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
ToggleField.propTypes = propTypes;
|
|
50
|
+
ToggleField.defaultProps = defaultProps;
|
|
51
|
+
|
|
52
|
+
var definition = {
|
|
53
|
+
id: 'toggle',
|
|
54
|
+
component: 'Toggle'
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
exports["default"] = ToggleField;
|
|
58
|
+
exports.definition = definition;
|
package/package.json
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@panneau/field-toggle",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.3-alpha.0",
|
|
4
|
+
"description": "A toggle field",
|
|
5
5
|
"keywords": [
|
|
6
|
-
"
|
|
7
|
-
"javascript",
|
|
8
|
-
"form",
|
|
9
|
-
"dashboard"
|
|
6
|
+
"javascript"
|
|
10
7
|
],
|
|
11
|
-
"homepage": "https://github.com/folkloreinc/panneau-js
|
|
8
|
+
"homepage": "https://github.com/folkloreinc/panneau-js",
|
|
12
9
|
"repository": {
|
|
13
10
|
"type": "git",
|
|
14
11
|
"url": "git+https://github.com/folkloreinc/panneau-js.git"
|
|
@@ -25,45 +22,45 @@
|
|
|
25
22
|
{
|
|
26
23
|
"name": "Nicolas Roy-Bourdages",
|
|
27
24
|
"email": "nrb@folklore.email"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "Julien Carignan",
|
|
28
|
+
"email": "jc@folklore.email"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "Théo Gjini",
|
|
32
|
+
"email": "tg@folklore.email"
|
|
28
33
|
}
|
|
29
34
|
],
|
|
35
|
+
"license": "ISC",
|
|
30
36
|
"main": "lib/index.js",
|
|
31
37
|
"module": "es/index.js",
|
|
32
38
|
"files": [
|
|
33
39
|
"lib",
|
|
34
40
|
"es",
|
|
35
|
-
"
|
|
41
|
+
"assets"
|
|
36
42
|
],
|
|
37
43
|
"scripts": {
|
|
38
|
-
"
|
|
39
|
-
"clean": "rm -rf dist && rm -rf lib && rm -rf es",
|
|
40
|
-
"webpack:dist": "../../node_modules/.bin/webpack --config ./webpack.config.js --progress --colors",
|
|
41
|
-
"webpack": "npm run webpack:dist",
|
|
42
|
-
"babel:es": "BABEL_ENV=es ../../node_modules/.bin/babel src --out-dir es --ignore src/**/*.story.jsx,src/**/*.test.jsx",
|
|
43
|
-
"babel:cjs": "BABEL_ENV=cjs ../../node_modules/.bin/babel src --out-dir lib --ignore src/**/*.story.jsx,src/**/*.test.jsx",
|
|
44
|
-
"babel": "npm run babel:es && npm run babel:cjs",
|
|
45
|
-
"build": "npm run babel",
|
|
46
|
-
"prepare": "npm run clean && npm run build",
|
|
47
|
-
"start": "npm run storybook"
|
|
48
|
-
},
|
|
49
|
-
"dependencies": {
|
|
50
|
-
"@babel/runtime": "^7.5.5",
|
|
51
|
-
"@panneau/core": "^1.0.1-alpha.0",
|
|
52
|
-
"@panneau/field": "^1.0.1-alpha.0",
|
|
53
|
-
"@panneau/field-select": "^1.0.2-alpha.0",
|
|
54
|
-
"classnames": "^2.2.5",
|
|
55
|
-
"lodash": "^4.17.4",
|
|
56
|
-
"prop-types": "^15.7.0",
|
|
57
|
-
"rc-switch": "^1.5.3",
|
|
58
|
-
"react-loadable": "^5.5.0"
|
|
44
|
+
"prepare": "../../scripts/prepare-package.sh"
|
|
59
45
|
},
|
|
60
46
|
"devDependencies": {
|
|
61
|
-
"react": "^16.
|
|
62
|
-
"react-dom": "^16.
|
|
47
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
48
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
63
49
|
},
|
|
64
50
|
"peerDependencies": {
|
|
65
|
-
"react": "^16.8.0",
|
|
66
|
-
"react-dom": "^16.8.0"
|
|
51
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
52
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
53
|
+
},
|
|
54
|
+
"dependencies": {
|
|
55
|
+
"@babel/runtime": "^7.12.5",
|
|
56
|
+
"@panneau/core": "^1.0.3-alpha.0",
|
|
57
|
+
"@panneau/themes": "^1.0.3-alpha.0",
|
|
58
|
+
"classnames": "^2.2.6",
|
|
59
|
+
"prop-types": "^15.7.2",
|
|
60
|
+
"rc-switch": "^3.2.2"
|
|
61
|
+
},
|
|
62
|
+
"publishConfig": {
|
|
63
|
+
"access": "public"
|
|
67
64
|
},
|
|
68
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "7f9c472b97c79a5c81da30730549acdde2de5c9f"
|
|
69
66
|
}
|
package/es/ToggleField.js
DELETED
|
@@ -1,179 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
|
-
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
-
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
-
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
7
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
8
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
9
|
-
import React, { Component } from 'react';
|
|
10
|
-
import PropTypes from 'prop-types';
|
|
11
|
-
import isObject from 'lodash/isObject';
|
|
12
|
-
import SelectField from '@panneau/field-select';
|
|
13
|
-
import { FormGroup } from '@panneau/field';
|
|
14
|
-
import { PropTypes as PanneauPropTypes } from '@panneau/core';
|
|
15
|
-
import 'rc-switch/assets/index.css';
|
|
16
|
-
import Switch from './vendors';
|
|
17
|
-
/**
|
|
18
|
-
* Class: ToggleField
|
|
19
|
-
* Makes a true-false select
|
|
20
|
-
* @param {string,number,bool} value
|
|
21
|
-
* @return {bool} val
|
|
22
|
-
*/
|
|
23
|
-
|
|
24
|
-
var propTypes = {
|
|
25
|
-
type: PropTypes.oneOf(['switch', 'select']),
|
|
26
|
-
name: PropTypes.string,
|
|
27
|
-
label: PanneauPropTypes.label,
|
|
28
|
-
helpText: PropTypes.string,
|
|
29
|
-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
|
|
30
|
-
onChange: PropTypes.func,
|
|
31
|
-
selectOptions: PropTypes.arrayOf(PropTypes.shape({
|
|
32
|
-
value: PropTypes.any,
|
|
33
|
-
label: PropTypes.string
|
|
34
|
-
})),
|
|
35
|
-
clearable: PropTypes.bool,
|
|
36
|
-
canBeEmpty: PropTypes.bool,
|
|
37
|
-
collapsed: PropTypes.bool,
|
|
38
|
-
collapsible: PropTypes.bool
|
|
39
|
-
};
|
|
40
|
-
var defaultProps = {
|
|
41
|
-
type: 'switch',
|
|
42
|
-
name: null,
|
|
43
|
-
label: '',
|
|
44
|
-
helpText: null,
|
|
45
|
-
value: null,
|
|
46
|
-
onChange: null,
|
|
47
|
-
selectOptions: [{
|
|
48
|
-
value: 'true',
|
|
49
|
-
label: 'Yes'
|
|
50
|
-
}, {
|
|
51
|
-
value: 'false',
|
|
52
|
-
label: 'No'
|
|
53
|
-
}],
|
|
54
|
-
clearable: false,
|
|
55
|
-
canBeEmpty: false,
|
|
56
|
-
collapsed: false,
|
|
57
|
-
collapsible: false
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
var ToggleField =
|
|
61
|
-
/*#__PURE__*/
|
|
62
|
-
function (_Component) {
|
|
63
|
-
_inherits(ToggleField, _Component);
|
|
64
|
-
|
|
65
|
-
_createClass(ToggleField, null, [{
|
|
66
|
-
key: "parse",
|
|
67
|
-
value: function parse(value) {
|
|
68
|
-
if (value === true || value === 1 || value === '1' || value === 'true') {
|
|
69
|
-
return true;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
return false;
|
|
73
|
-
}
|
|
74
|
-
}]);
|
|
75
|
-
|
|
76
|
-
function ToggleField(props) {
|
|
77
|
-
var _this;
|
|
78
|
-
|
|
79
|
-
_classCallCheck(this, ToggleField);
|
|
80
|
-
|
|
81
|
-
_this = _possibleConstructorReturn(this, _getPrototypeOf(ToggleField).call(this, props));
|
|
82
|
-
_this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
|
|
83
|
-
return _this;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
_createClass(ToggleField, [{
|
|
87
|
-
key: "onChange",
|
|
88
|
-
value: function onChange(value) {
|
|
89
|
-
var onChange = this.props.onChange;
|
|
90
|
-
var val = isObject(value) && typeof value.value !== 'undefined' ? value.value : value;
|
|
91
|
-
var newValue = val === '' || value === null ? null : ToggleField.parse(val);
|
|
92
|
-
|
|
93
|
-
if (onChange !== null) {
|
|
94
|
-
onChange(newValue);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
}, {
|
|
98
|
-
key: "renderSelect",
|
|
99
|
-
value: function renderSelect() {
|
|
100
|
-
var _this$props = this.props,
|
|
101
|
-
type = _this$props.type,
|
|
102
|
-
label = _this$props.label,
|
|
103
|
-
collapsed = _this$props.collapsed,
|
|
104
|
-
collapsible = _this$props.collapsible,
|
|
105
|
-
clearable = _this$props.clearable,
|
|
106
|
-
canBeEmpty = _this$props.canBeEmpty,
|
|
107
|
-
value = _this$props.value,
|
|
108
|
-
selectOptions = _this$props.selectOptions,
|
|
109
|
-
other = _objectWithoutProperties(_this$props, ["type", "label", "collapsed", "collapsible", "clearable", "canBeEmpty", "value", "selectOptions"]);
|
|
110
|
-
|
|
111
|
-
var val = value !== null ? "".concat(ToggleField.parse(value)) : null;
|
|
112
|
-
return React.createElement(SelectField, _extends({}, other, {
|
|
113
|
-
inputOnly: true,
|
|
114
|
-
notSearchable: true,
|
|
115
|
-
notClearable: !clearable,
|
|
116
|
-
canBeEmpty: canBeEmpty,
|
|
117
|
-
value: val,
|
|
118
|
-
onChange: this.onChange,
|
|
119
|
-
options: selectOptions
|
|
120
|
-
}));
|
|
121
|
-
}
|
|
122
|
-
}, {
|
|
123
|
-
key: "renderSwitch",
|
|
124
|
-
value: function renderSwitch() {
|
|
125
|
-
var _this$props2 = this.props,
|
|
126
|
-
type = _this$props2.type,
|
|
127
|
-
label = _this$props2.label,
|
|
128
|
-
collapsed = _this$props2.collapsed,
|
|
129
|
-
collapsible = _this$props2.collapsible,
|
|
130
|
-
clearable = _this$props2.clearable,
|
|
131
|
-
canBeEmpty = _this$props2.canBeEmpty,
|
|
132
|
-
value = _this$props2.value,
|
|
133
|
-
selectOptions = _this$props2.selectOptions,
|
|
134
|
-
helpText = _this$props2.helpText,
|
|
135
|
-
other = _objectWithoutProperties(_this$props2, ["type", "label", "collapsed", "collapsible", "clearable", "canBeEmpty", "value", "selectOptions", "helpText"]);
|
|
136
|
-
|
|
137
|
-
var val = value !== null ? ToggleField.parse(value) : null;
|
|
138
|
-
return React.createElement(Switch, _extends({}, other, {
|
|
139
|
-
checked: val,
|
|
140
|
-
onChange: this.onChange
|
|
141
|
-
}));
|
|
142
|
-
}
|
|
143
|
-
}, {
|
|
144
|
-
key: "render",
|
|
145
|
-
value: function render() {
|
|
146
|
-
var _this$props3 = this.props,
|
|
147
|
-
type = _this$props3.type,
|
|
148
|
-
label = _this$props3.label,
|
|
149
|
-
collapsed = _this$props3.collapsed,
|
|
150
|
-
collapsible = _this$props3.collapsible,
|
|
151
|
-
clearable = _this$props3.clearable,
|
|
152
|
-
canBeEmpty = _this$props3.canBeEmpty,
|
|
153
|
-
value = _this$props3.value,
|
|
154
|
-
other = _objectWithoutProperties(_this$props3, ["type", "label", "collapsed", "collapsible", "clearable", "canBeEmpty", "value"]);
|
|
155
|
-
|
|
156
|
-
var input = null;
|
|
157
|
-
|
|
158
|
-
if (type === 'select') {
|
|
159
|
-
input = this.renderSelect();
|
|
160
|
-
} else if (type === 'switch') {
|
|
161
|
-
input = this.renderSwitch();
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
return React.createElement(FormGroup, _extends({}, other, {
|
|
165
|
-
label: label,
|
|
166
|
-
className: "form-group-".concat(type),
|
|
167
|
-
collapsible: collapsible,
|
|
168
|
-
collapsed: collapsed,
|
|
169
|
-
inline: true
|
|
170
|
-
}), input);
|
|
171
|
-
}
|
|
172
|
-
}]);
|
|
173
|
-
|
|
174
|
-
return ToggleField;
|
|
175
|
-
}(Component);
|
|
176
|
-
|
|
177
|
-
ToggleField.propTypes = propTypes;
|
|
178
|
-
ToggleField.defaultProps = defaultProps;
|
|
179
|
-
export default ToggleField;
|
package/es/vendors.js
DELETED
package/lib/ToggleField.js
DELETED
|
@@ -1,200 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports["default"] = void 0;
|
|
11
|
-
|
|
12
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
|
-
|
|
16
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
17
|
-
|
|
18
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
19
|
-
|
|
20
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
21
|
-
|
|
22
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
23
|
-
|
|
24
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
25
|
-
|
|
26
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
27
|
-
|
|
28
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
29
|
-
|
|
30
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
31
|
-
|
|
32
|
-
var _isObject = _interopRequireDefault(require("lodash/isObject"));
|
|
33
|
-
|
|
34
|
-
var _fieldSelect = _interopRequireDefault(require("@panneau/field-select"));
|
|
35
|
-
|
|
36
|
-
var _field = require("@panneau/field");
|
|
37
|
-
|
|
38
|
-
var _core = require("@panneau/core");
|
|
39
|
-
|
|
40
|
-
require("rc-switch/assets/index.css");
|
|
41
|
-
|
|
42
|
-
var _vendors = _interopRequireDefault(require("./vendors"));
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* Class: ToggleField
|
|
46
|
-
* Makes a true-false select
|
|
47
|
-
* @param {string,number,bool} value
|
|
48
|
-
* @return {bool} val
|
|
49
|
-
*/
|
|
50
|
-
var propTypes = {
|
|
51
|
-
type: _propTypes["default"].oneOf(['switch', 'select']),
|
|
52
|
-
name: _propTypes["default"].string,
|
|
53
|
-
label: _core.PropTypes.label,
|
|
54
|
-
helpText: _propTypes["default"].string,
|
|
55
|
-
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].bool]),
|
|
56
|
-
onChange: _propTypes["default"].func,
|
|
57
|
-
selectOptions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
58
|
-
value: _propTypes["default"].any,
|
|
59
|
-
label: _propTypes["default"].string
|
|
60
|
-
})),
|
|
61
|
-
clearable: _propTypes["default"].bool,
|
|
62
|
-
canBeEmpty: _propTypes["default"].bool,
|
|
63
|
-
collapsed: _propTypes["default"].bool,
|
|
64
|
-
collapsible: _propTypes["default"].bool
|
|
65
|
-
};
|
|
66
|
-
var defaultProps = {
|
|
67
|
-
type: 'switch',
|
|
68
|
-
name: null,
|
|
69
|
-
label: '',
|
|
70
|
-
helpText: null,
|
|
71
|
-
value: null,
|
|
72
|
-
onChange: null,
|
|
73
|
-
selectOptions: [{
|
|
74
|
-
value: 'true',
|
|
75
|
-
label: 'Yes'
|
|
76
|
-
}, {
|
|
77
|
-
value: 'false',
|
|
78
|
-
label: 'No'
|
|
79
|
-
}],
|
|
80
|
-
clearable: false,
|
|
81
|
-
canBeEmpty: false,
|
|
82
|
-
collapsed: false,
|
|
83
|
-
collapsible: false
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
var ToggleField =
|
|
87
|
-
/*#__PURE__*/
|
|
88
|
-
function (_Component) {
|
|
89
|
-
(0, _inherits2["default"])(ToggleField, _Component);
|
|
90
|
-
(0, _createClass2["default"])(ToggleField, null, [{
|
|
91
|
-
key: "parse",
|
|
92
|
-
value: function parse(value) {
|
|
93
|
-
if (value === true || value === 1 || value === '1' || value === 'true') {
|
|
94
|
-
return true;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
return false;
|
|
98
|
-
}
|
|
99
|
-
}]);
|
|
100
|
-
|
|
101
|
-
function ToggleField(props) {
|
|
102
|
-
var _this;
|
|
103
|
-
|
|
104
|
-
(0, _classCallCheck2["default"])(this, ToggleField);
|
|
105
|
-
_this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ToggleField).call(this, props));
|
|
106
|
-
_this.onChange = _this.onChange.bind((0, _assertThisInitialized2["default"])(_this));
|
|
107
|
-
return _this;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
(0, _createClass2["default"])(ToggleField, [{
|
|
111
|
-
key: "onChange",
|
|
112
|
-
value: function onChange(value) {
|
|
113
|
-
var onChange = this.props.onChange;
|
|
114
|
-
var val = (0, _isObject["default"])(value) && typeof value.value !== 'undefined' ? value.value : value;
|
|
115
|
-
var newValue = val === '' || value === null ? null : ToggleField.parse(val);
|
|
116
|
-
|
|
117
|
-
if (onChange !== null) {
|
|
118
|
-
onChange(newValue);
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}, {
|
|
122
|
-
key: "renderSelect",
|
|
123
|
-
value: function renderSelect() {
|
|
124
|
-
var _this$props = this.props,
|
|
125
|
-
type = _this$props.type,
|
|
126
|
-
label = _this$props.label,
|
|
127
|
-
collapsed = _this$props.collapsed,
|
|
128
|
-
collapsible = _this$props.collapsible,
|
|
129
|
-
clearable = _this$props.clearable,
|
|
130
|
-
canBeEmpty = _this$props.canBeEmpty,
|
|
131
|
-
value = _this$props.value,
|
|
132
|
-
selectOptions = _this$props.selectOptions,
|
|
133
|
-
other = (0, _objectWithoutProperties2["default"])(_this$props, ["type", "label", "collapsed", "collapsible", "clearable", "canBeEmpty", "value", "selectOptions"]);
|
|
134
|
-
var val = value !== null ? "".concat(ToggleField.parse(value)) : null;
|
|
135
|
-
return _react["default"].createElement(_fieldSelect["default"], (0, _extends2["default"])({}, other, {
|
|
136
|
-
inputOnly: true,
|
|
137
|
-
notSearchable: true,
|
|
138
|
-
notClearable: !clearable,
|
|
139
|
-
canBeEmpty: canBeEmpty,
|
|
140
|
-
value: val,
|
|
141
|
-
onChange: this.onChange,
|
|
142
|
-
options: selectOptions
|
|
143
|
-
}));
|
|
144
|
-
}
|
|
145
|
-
}, {
|
|
146
|
-
key: "renderSwitch",
|
|
147
|
-
value: function renderSwitch() {
|
|
148
|
-
var _this$props2 = this.props,
|
|
149
|
-
type = _this$props2.type,
|
|
150
|
-
label = _this$props2.label,
|
|
151
|
-
collapsed = _this$props2.collapsed,
|
|
152
|
-
collapsible = _this$props2.collapsible,
|
|
153
|
-
clearable = _this$props2.clearable,
|
|
154
|
-
canBeEmpty = _this$props2.canBeEmpty,
|
|
155
|
-
value = _this$props2.value,
|
|
156
|
-
selectOptions = _this$props2.selectOptions,
|
|
157
|
-
helpText = _this$props2.helpText,
|
|
158
|
-
other = (0, _objectWithoutProperties2["default"])(_this$props2, ["type", "label", "collapsed", "collapsible", "clearable", "canBeEmpty", "value", "selectOptions", "helpText"]);
|
|
159
|
-
var val = value !== null ? ToggleField.parse(value) : null;
|
|
160
|
-
return _react["default"].createElement(_vendors["default"], (0, _extends2["default"])({}, other, {
|
|
161
|
-
checked: val,
|
|
162
|
-
onChange: this.onChange
|
|
163
|
-
}));
|
|
164
|
-
}
|
|
165
|
-
}, {
|
|
166
|
-
key: "render",
|
|
167
|
-
value: function render() {
|
|
168
|
-
var _this$props3 = this.props,
|
|
169
|
-
type = _this$props3.type,
|
|
170
|
-
label = _this$props3.label,
|
|
171
|
-
collapsed = _this$props3.collapsed,
|
|
172
|
-
collapsible = _this$props3.collapsible,
|
|
173
|
-
clearable = _this$props3.clearable,
|
|
174
|
-
canBeEmpty = _this$props3.canBeEmpty,
|
|
175
|
-
value = _this$props3.value,
|
|
176
|
-
other = (0, _objectWithoutProperties2["default"])(_this$props3, ["type", "label", "collapsed", "collapsible", "clearable", "canBeEmpty", "value"]);
|
|
177
|
-
var input = null;
|
|
178
|
-
|
|
179
|
-
if (type === 'select') {
|
|
180
|
-
input = this.renderSelect();
|
|
181
|
-
} else if (type === 'switch') {
|
|
182
|
-
input = this.renderSwitch();
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
return _react["default"].createElement(_field.FormGroup, (0, _extends2["default"])({}, other, {
|
|
186
|
-
label: label,
|
|
187
|
-
className: "form-group-".concat(type),
|
|
188
|
-
collapsible: collapsible,
|
|
189
|
-
collapsed: collapsed,
|
|
190
|
-
inline: true
|
|
191
|
-
}), input);
|
|
192
|
-
}
|
|
193
|
-
}]);
|
|
194
|
-
return ToggleField;
|
|
195
|
-
}(_react.Component);
|
|
196
|
-
|
|
197
|
-
ToggleField.propTypes = propTypes;
|
|
198
|
-
ToggleField.defaultProps = defaultProps;
|
|
199
|
-
var _default = ToggleField;
|
|
200
|
-
exports["default"] = _default;
|
package/lib/vendors.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
|
|
11
|
-
|
|
12
|
-
var _reactLoadable = _interopRequireDefault(require("react-loadable"));
|
|
13
|
-
|
|
14
|
-
var _default = (0, _reactLoadable["default"])({
|
|
15
|
-
loader: function loader() {
|
|
16
|
-
return Promise.resolve().then(function () {
|
|
17
|
-
return (0, _interopRequireWildcard2["default"])(require('rc-switch'));
|
|
18
|
-
});
|
|
19
|
-
},
|
|
20
|
-
loading: function loading() {
|
|
21
|
-
return null;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
exports["default"] = _default;
|