@pingux/astro 2.6.0-alpha.2 → 2.6.0-alpha.4
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/cjs/components/MultivaluesField/MultivaluesField.js +49 -19
- package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js +50 -0
- package/lib/components/MultivaluesField/MultivaluesField.js +49 -19
- package/lib/components/MultivaluesField/MultivaluesField.test.js +50 -0
- package/package.json +1 -1
- package/lib/cjs/recipes/Arrow.stories.js +0 -43
- package/lib/cjs/recipes/DatePicker.stories.js +0 -179
- package/lib/cjs/recipes/DraggableBox.stories.js +0 -49
- package/lib/cjs/recipes/FlippableCaretMenuButton.stories.js +0 -169
- package/lib/cjs/recipes/NeutralInput.stories.js +0 -29
- package/lib/recipes/Arrow.stories.js +0 -33
- package/lib/recipes/DatePicker.stories.js +0 -164
- package/lib/recipes/DraggableBox.stories.js +0 -39
- package/lib/recipes/FlippableCaretMenuButton.stories.js +0 -156
- package/lib/recipes/NeutralInput.stories.js +0 -19
@@ -1,156 +0,0 @@
|
|
1
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
2
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
3
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
4
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
5
|
-
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
6
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
7
|
-
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
8
|
-
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
9
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
10
|
-
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
11
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
12
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
13
|
-
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
|
14
|
-
import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
|
15
|
-
import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
|
16
|
-
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
17
|
-
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
18
|
-
import React, { useRef, useState } from 'react';
|
19
|
-
import { useOverlayPosition } from 'react-aria';
|
20
|
-
import CloseIcon from '@pingux/mdi-react/CloseIcon';
|
21
|
-
import MenuDown from '@pingux/mdi-react/MenuDownIcon';
|
22
|
-
import MenuUp from '@pingux/mdi-react/MenuUpIcon';
|
23
|
-
import { useLayoutEffect } from '@react-aria/utils';
|
24
|
-
import { Box, Button, Icon, IconButton, PopoverContainer } from '../index';
|
25
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
26
|
-
export default {
|
27
|
-
title: 'Recipes/Flippable Caret Menu Button'
|
28
|
-
};
|
29
|
-
var buttonArray = ['Web App', 'Native App', 'Single Page App', 'Non-Interactive', 'Worker', 'Advanced Configuration', 'Built-in admin console for this environment', 'Built-in Application portal'];
|
30
|
-
var sx = {
|
31
|
-
openButton: {
|
32
|
-
height: '30px',
|
33
|
-
borderRadius: 'md',
|
34
|
-
fontSize: '13px',
|
35
|
-
mb: 'sm'
|
36
|
-
},
|
37
|
-
closeIconButton: {
|
38
|
-
position: 'absolute',
|
39
|
-
top: '14px',
|
40
|
-
right: 'sm'
|
41
|
-
},
|
42
|
-
buttonsContainer: {
|
43
|
-
p: 'lg',
|
44
|
-
flexDirection: 'initial !important',
|
45
|
-
alignContent: 'space-between',
|
46
|
-
flexWrap: 'wrap'
|
47
|
-
},
|
48
|
-
selectedButton: {
|
49
|
-
mb: 'sm',
|
50
|
-
mr: '4px',
|
51
|
-
height: '30px',
|
52
|
-
borderRadius: '15px',
|
53
|
-
fontSize: '13px'
|
54
|
-
},
|
55
|
-
unSelectedButton: {
|
56
|
-
mb: 'sm',
|
57
|
-
mr: '4px',
|
58
|
-
borderColor: 'neutral.80',
|
59
|
-
height: '30px',
|
60
|
-
borderRadius: '15px',
|
61
|
-
fontSize: '13px'
|
62
|
-
}
|
63
|
-
};
|
64
|
-
export var Default = function Default() {
|
65
|
-
var buttonRef = useRef();
|
66
|
-
var popoverRef = useRef();
|
67
|
-
var _useState = useState(false),
|
68
|
-
_useState2 = _slicedToArray(_useState, 2),
|
69
|
-
isOpen = _useState2[0],
|
70
|
-
setIsOpen = _useState2[1];
|
71
|
-
var _useState3 = useState([]),
|
72
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
73
|
-
selectedButtons = _useState4[0],
|
74
|
-
setSelectedButton = _useState4[1];
|
75
|
-
var onChange = function onChange() {
|
76
|
-
setIsOpen(!isOpen);
|
77
|
-
};
|
78
|
-
var toggleButton = function toggleButton(key) {
|
79
|
-
var _context;
|
80
|
-
var newState = selectedButtons;
|
81
|
-
if (_includesInstanceProperty(selectedButtons).call(selectedButtons, key)) {
|
82
|
-
var index = _indexOfInstanceProperty(newState).call(newState, key);
|
83
|
-
_spliceInstanceProperty(newState).call(newState, index, 1);
|
84
|
-
} else {
|
85
|
-
newState.push(key);
|
86
|
-
}
|
87
|
-
setSelectedButton(_concatInstanceProperty(_context = []).call(_context, newState));
|
88
|
-
};
|
89
|
-
var _useOverlayPosition = useOverlayPosition({
|
90
|
-
targetRef: buttonRef,
|
91
|
-
overlayRef: popoverRef,
|
92
|
-
placement: 'bottom left',
|
93
|
-
isOpen: true
|
94
|
-
}),
|
95
|
-
overlayProps = _useOverlayPosition.overlayProps,
|
96
|
-
placement = _useOverlayPosition.placement,
|
97
|
-
updatePosition = _useOverlayPosition.updatePosition;
|
98
|
-
useLayoutEffect(function () {
|
99
|
-
requestAnimationFrame(function () {
|
100
|
-
updatePosition();
|
101
|
-
});
|
102
|
-
}, [updatePosition]);
|
103
|
-
var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
|
104
|
-
width: '500px',
|
105
|
-
minWidth: '500px',
|
106
|
-
height: '200px'
|
107
|
-
});
|
108
|
-
return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
|
109
|
-
ref: buttonRef,
|
110
|
-
variant: "inline",
|
111
|
-
onPress: onChange,
|
112
|
-
sx: sx.openButton
|
113
|
-
}, ___EmotionJSX(Box, {
|
114
|
-
isRow: true,
|
115
|
-
alignItems: "center"
|
116
|
-
}, ___EmotionJSX(Icon, {
|
117
|
-
icon: isOpen ? MenuUp : MenuDown,
|
118
|
-
mr: "sm",
|
119
|
-
color: "active",
|
120
|
-
size: 20,
|
121
|
-
title: {
|
122
|
-
name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
|
123
|
-
}
|
124
|
-
}), "Add a Form")), ___EmotionJSX(PopoverContainer, {
|
125
|
-
isOpen: isOpen,
|
126
|
-
hasNoArrow: true,
|
127
|
-
isNonModal: true,
|
128
|
-
isDismissable: false,
|
129
|
-
ref: popoverRef,
|
130
|
-
placement: placement,
|
131
|
-
style: style
|
132
|
-
}, ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
|
133
|
-
"aria-label": "my-label",
|
134
|
-
size: 22,
|
135
|
-
onPress: function onPress() {
|
136
|
-
return setIsOpen(false);
|
137
|
-
},
|
138
|
-
sx: sx.closeIconButton
|
139
|
-
}, ___EmotionJSX(Icon, {
|
140
|
-
icon: CloseIcon,
|
141
|
-
title: {
|
142
|
-
name: 'Close Icon'
|
143
|
-
}
|
144
|
-
})), ___EmotionJSX(Box, {
|
145
|
-
sx: sx.buttonsContainer
|
146
|
-
}, _mapInstanceProperty(buttonArray).call(buttonArray, function (item) {
|
147
|
-
return ___EmotionJSX(Button, {
|
148
|
-
variant: "inline",
|
149
|
-
sx: _includesInstanceProperty(selectedButtons).call(selectedButtons, item) ? sx.selectedButton : sx.unSelectedButton,
|
150
|
-
key: item,
|
151
|
-
onPress: function onPress() {
|
152
|
-
return toggleButton(item);
|
153
|
-
}
|
154
|
-
}, item);
|
155
|
-
})))));
|
156
|
-
};
|
@@ -1,19 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { CheckboxField } from '../index';
|
3
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
4
|
-
export default {
|
5
|
-
title: 'Recipes/Neutral Checkbox Field'
|
6
|
-
};
|
7
|
-
var sx = {
|
8
|
-
checkboxColor: {
|
9
|
-
color: 'neutral.10'
|
10
|
-
}
|
11
|
-
};
|
12
|
-
export var Default = function Default() {
|
13
|
-
return ___EmotionJSX(CheckboxField, {
|
14
|
-
controlProps: {
|
15
|
-
sx: sx.checkboxColor
|
16
|
-
},
|
17
|
-
label: "Click me"
|
18
|
-
});
|
19
|
-
};
|