@canlooks/can-ui 0.0.119 → 0.0.121

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.
@@ -19,6 +19,7 @@ exports.style = (0, utils_1.defineCss)(({ text, spacing }) => (0, react_1.css) `
19
19
  .${exports.classes.container} {
20
20
  display: flex;
21
21
  align-items: center;
22
+ gap: ${spacing[1]}px;
22
23
 
23
24
  .${exports.classes.placeholder} {
24
25
  flex: 1;
@@ -19,6 +19,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, divider }) => (0, react_1.css
19
19
  }
20
20
 
21
21
  &[data-orientation=horizontal] {
22
+ width: 100%;
22
23
  display: flex;
23
24
 
24
25
  .${exports.classes.line} {
@@ -27,6 +28,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, divider }) => (0, react_1.css
27
28
  }
28
29
 
29
30
  &[data-orientation=vertical] {
31
+ height: 100%;
30
32
  display: inline-flex;
31
33
  flex-direction: column;
32
34
 
@@ -70,7 +70,7 @@ exports.Gallery = (0, react_1.memo)(({ src, defaultIndex = 0, index, onIndexChan
70
70
  if ((!left && dx > 0) || (!right && dx < 0)) {
71
71
  return;
72
72
  }
73
- alowSlideTransition();
73
+ allowSlideTransition();
74
74
  const reset = () => {
75
75
  wrapperRef.current.style.left = -innerIndex.current * wrapperRef.current.offsetWidth + 'px';
76
76
  };
@@ -110,18 +110,18 @@ exports.Gallery = (0, react_1.memo)(({ src, defaultIndex = 0, index, onIndexChan
110
110
  const doubleClickHandler = () => {
111
111
  doubleClicked.current = true;
112
112
  };
113
- const alowSlideTransition = () => {
113
+ const allowSlideTransition = () => {
114
114
  wrapperRef.current && (wrapperRef.current.dataset.transition = 'set');
115
115
  };
116
116
  const goPrevLoop = () => {
117
- alowSlideTransition();
117
+ allowSlideTransition();
118
118
  setInnerIndex(o => {
119
119
  imageItemRefs.current[o].reset();
120
120
  return (o + srcArr.current.length - 1) % srcArr.current.length;
121
121
  });
122
122
  };
123
123
  const goNextLoop = () => {
124
- alowSlideTransition();
124
+ allowSlideTransition();
125
125
  setInnerIndex(o => {
126
126
  imageItemRefs.current[o].reset();
127
127
  return (o + 1) % srcArr.current.length;
@@ -1 +1,2 @@
1
1
  export * from './gallery';
2
+ export * from './imageItem';
@@ -2,3 +2,4 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  tslib_1.__exportStar(require("./gallery"), exports);
5
+ tslib_1.__exportStar(require("./imageItem"), exports);
@@ -20,7 +20,7 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
20
20
  rotateFn(innerRotate.current - 90);
21
21
  };
22
22
  wrapperRef.current.rotateRight = () => {
23
- rotateFn(innerRotate.current - 90);
23
+ rotateFn(innerRotate.current + 90);
24
24
  };
25
25
  wrapperRef.current.reset = resetAll;
26
26
  }
@@ -16,6 +16,7 @@ export const style = defineCss(({ text, spacing }) => css `
16
16
  .${classes.container} {
17
17
  display: flex;
18
18
  align-items: center;
19
+ gap: ${spacing[1]}px;
19
20
 
20
21
  .${classes.placeholder} {
21
22
  flex: 1;
@@ -16,6 +16,7 @@ export const style = defineCss(({ spacing, divider }) => css `
16
16
  }
17
17
 
18
18
  &[data-orientation=horizontal] {
19
+ width: 100%;
19
20
  display: flex;
20
21
 
21
22
  .${classes.line} {
@@ -24,6 +25,7 @@ export const style = defineCss(({ spacing, divider }) => css `
24
25
  }
25
26
 
26
27
  &[data-orientation=vertical] {
28
+ height: 100%;
27
29
  display: inline-flex;
28
30
  flex-direction: column;
29
31
 
@@ -67,7 +67,7 @@ export const Gallery = memo(({ src, defaultIndex = 0, index, onIndexChange, defa
67
67
  if ((!left && dx > 0) || (!right && dx < 0)) {
68
68
  return;
69
69
  }
70
- alowSlideTransition();
70
+ allowSlideTransition();
71
71
  const reset = () => {
72
72
  wrapperRef.current.style.left = -innerIndex.current * wrapperRef.current.offsetWidth + 'px';
73
73
  };
@@ -107,18 +107,18 @@ export const Gallery = memo(({ src, defaultIndex = 0, index, onIndexChange, defa
107
107
  const doubleClickHandler = () => {
108
108
  doubleClicked.current = true;
109
109
  };
110
- const alowSlideTransition = () => {
110
+ const allowSlideTransition = () => {
111
111
  wrapperRef.current && (wrapperRef.current.dataset.transition = 'set');
112
112
  };
113
113
  const goPrevLoop = () => {
114
- alowSlideTransition();
114
+ allowSlideTransition();
115
115
  setInnerIndex(o => {
116
116
  imageItemRefs.current[o].reset();
117
117
  return (o + srcArr.current.length - 1) % srcArr.current.length;
118
118
  });
119
119
  };
120
120
  const goNextLoop = () => {
121
- alowSlideTransition();
121
+ allowSlideTransition();
122
122
  setInnerIndex(o => {
123
123
  imageItemRefs.current[o].reset();
124
124
  return (o + 1) % srcArr.current.length;
@@ -1 +1,2 @@
1
1
  export * from './gallery';
2
+ export * from './imageItem';
@@ -1 +1,2 @@
1
1
  export * from './gallery';
2
+ export * from './imageItem';
@@ -17,7 +17,7 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
17
17
  rotateFn(innerRotate.current - 90);
18
18
  };
19
19
  wrapperRef.current.rotateRight = () => {
20
- rotateFn(innerRotate.current - 90);
20
+ rotateFn(innerRotate.current + 90);
21
21
  };
22
22
  wrapperRef.current.reset = resetAll;
23
23
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.119",
3
+ "version": "0.0.121",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",