sanity-plugin-utils 1.6.3 → 1.6.5
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/README.md +8 -0
- package/lib/{index.esm.js → index.cjs} +88 -66
- package/lib/index.cjs.js +13 -0
- package/lib/index.cjs.map +1 -0
- package/lib/index.d.ts +2 -2
- package/lib/index.js +65 -87
- package/lib/index.js.map +1 -1
- package/package.json +42 -37
- package/src/components/Feedback.tsx +5 -2
- package/src/components/Table.tsx +20 -23
- package/src/hooks/useListeningQuery.tsx +5 -5
- package/src/hooks/useOpenInNewPane.tsx +1 -1
- package/lib/index.esm.js.map +0 -1
package/lib/index.js
CHANGED
|
@@ -1,26 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var router = require('sanity/router');
|
|
12
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
13
|
-
var ui = require('@sanity/ui');
|
|
14
|
-
var styled = require('styled-components');
|
|
15
|
-
var icons = require('@sanity/icons');
|
|
16
|
-
function _interopDefaultCompat(e) {
|
|
17
|
-
return e && typeof e === 'object' && 'default' in e ? e : {
|
|
18
|
-
default: e
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
22
|
-
var isEqual__default = /*#__PURE__*/_interopDefaultCompat(isEqual);
|
|
23
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
1
|
+
import React, { useMemo, useState, useRef, useEffect } from 'react';
|
|
2
|
+
import { useClient, useDocumentStore, useWorkspace, UserAvatar } from 'sanity';
|
|
3
|
+
import isEqual from 'react-fast-compare';
|
|
4
|
+
import { distinctUntilChanged, catchError } from 'rxjs/operators';
|
|
5
|
+
import { usePaneRouter } from 'sanity/structure';
|
|
6
|
+
import { RouterContext } from 'sanity/router';
|
|
7
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
8
|
+
import { Card, Flex, Box, Stack, Text, Menu, MenuItem, TextInput, Badge } from '@sanity/ui';
|
|
9
|
+
import styled, { css } from 'styled-components';
|
|
10
|
+
import { RemoveCircleIcon, AddCircleIcon, RestoreIcon } from '@sanity/icons';
|
|
24
11
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
25
12
|
function getDefaultExportFromCjs(x) {
|
|
26
13
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -671,13 +658,13 @@ var builder_1 = __importDefault(builder);
|
|
|
671
658
|
var node = builder_1.default;
|
|
672
659
|
var createImageUrlBuilder = /*@__PURE__*/getDefaultExportFromCjs(node);
|
|
673
660
|
function useImageUrlBuilder(clientOptions) {
|
|
674
|
-
const client =
|
|
675
|
-
const builder =
|
|
661
|
+
const client = useClient(clientOptions);
|
|
662
|
+
const builder = useMemo(() => createImageUrlBuilder(client), [client]);
|
|
676
663
|
return builder;
|
|
677
664
|
}
|
|
678
665
|
function useImageUrlBuilderImage(source, clientOptions) {
|
|
679
666
|
const builder = useImageUrlBuilder(clientOptions);
|
|
680
|
-
const image =
|
|
667
|
+
const image = useMemo(() => source && builder ? builder.image(source) : null, [builder, source]);
|
|
681
668
|
return image;
|
|
682
669
|
}
|
|
683
670
|
const DEFAULT_PARAMS = {};
|
|
@@ -686,8 +673,8 @@ const DEFAULT_OPTIONS = {
|
|
|
686
673
|
};
|
|
687
674
|
const DEFAULT_INITIAL_VALUE = null;
|
|
688
675
|
function useParams(params) {
|
|
689
|
-
const stringifiedParams =
|
|
690
|
-
return
|
|
676
|
+
const stringifiedParams = useMemo(() => JSON.stringify(params || {}), [params]);
|
|
677
|
+
return useMemo(() => JSON.parse(stringifiedParams), [stringifiedParams]);
|
|
691
678
|
}
|
|
692
679
|
function useListeningQuery(query, _ref) {
|
|
693
680
|
let {
|
|
@@ -695,24 +682,24 @@ function useListeningQuery(query, _ref) {
|
|
|
695
682
|
options = DEFAULT_OPTIONS,
|
|
696
683
|
initialValue = DEFAULT_INITIAL_VALUE
|
|
697
684
|
} = _ref;
|
|
698
|
-
const [loading, setLoading] =
|
|
699
|
-
const [error, setError] =
|
|
700
|
-
const [data, setData] =
|
|
685
|
+
const [loading, setLoading] = useState(true);
|
|
686
|
+
const [error, setError] = useState(false);
|
|
687
|
+
const [data, setData] = useState(initialValue);
|
|
701
688
|
const memoParams = useParams(params);
|
|
702
689
|
const memoOptions = useParams(options);
|
|
703
|
-
const subscription =
|
|
704
|
-
const documentStore =
|
|
705
|
-
|
|
690
|
+
const subscription = useRef(null);
|
|
691
|
+
const documentStore = useDocumentStore();
|
|
692
|
+
useEffect(() => {
|
|
706
693
|
if (query && !error && !subscription.current) {
|
|
707
694
|
try {
|
|
708
|
-
subscription.current = documentStore.listenQuery(query, memoParams, memoOptions).pipe(
|
|
695
|
+
subscription.current = documentStore.listenQuery(query, memoParams, memoOptions).pipe(distinctUntilChanged(isEqual), catchError(err => {
|
|
709
696
|
console.error(err);
|
|
710
697
|
setError(err);
|
|
711
698
|
setLoading(false);
|
|
712
699
|
setData(null);
|
|
713
700
|
return err;
|
|
714
701
|
})).subscribe(documents => {
|
|
715
|
-
setData(current =>
|
|
702
|
+
setData(current => isEqual(current, documents) ? current : documents);
|
|
716
703
|
setLoading(false);
|
|
717
704
|
setError(false);
|
|
718
705
|
});
|
|
@@ -745,12 +732,12 @@ function useProjectUsers(_ref2) {
|
|
|
745
732
|
} = _ref2;
|
|
746
733
|
const {
|
|
747
734
|
currentUser
|
|
748
|
-
} =
|
|
749
|
-
const client =
|
|
735
|
+
} = useWorkspace();
|
|
736
|
+
const client = useClient({
|
|
750
737
|
apiVersion: apiVersion != null ? apiVersion : "2023-01-01"
|
|
751
738
|
});
|
|
752
|
-
const [users, setUsers] =
|
|
753
|
-
|
|
739
|
+
const [users, setUsers] = useState([]);
|
|
740
|
+
useEffect(() => {
|
|
754
741
|
const {
|
|
755
742
|
projectId
|
|
756
743
|
} = client.config();
|
|
@@ -776,12 +763,12 @@ function useProjectUsers(_ref2) {
|
|
|
776
763
|
return users;
|
|
777
764
|
}
|
|
778
765
|
function useOpenInNewPane(id, type) {
|
|
779
|
-
const routerContext =
|
|
766
|
+
const routerContext = React.useContext(RouterContext);
|
|
780
767
|
const {
|
|
781
768
|
routerPanesState,
|
|
782
769
|
groupIndex
|
|
783
|
-
} =
|
|
784
|
-
const openInNewPane =
|
|
770
|
+
} = usePaneRouter();
|
|
771
|
+
const openInNewPane = React.useCallback(() => {
|
|
785
772
|
if (!routerContext || !id || !type) {
|
|
786
773
|
return;
|
|
787
774
|
}
|
|
@@ -815,20 +802,20 @@ function Feedback(props) {
|
|
|
815
802
|
...DEFAULT_PROPS,
|
|
816
803
|
...props
|
|
817
804
|
};
|
|
818
|
-
return /* @__PURE__ */
|
|
805
|
+
return /* @__PURE__ */jsx(Card, {
|
|
819
806
|
tone,
|
|
820
807
|
padding: 4,
|
|
821
808
|
radius: 3,
|
|
822
809
|
border: true,
|
|
823
|
-
children: /* @__PURE__ */
|
|
824
|
-
children: [icon ? "display icon" : null, children ? children : /* @__PURE__ */
|
|
810
|
+
children: /* @__PURE__ */jsxs(Flex, {
|
|
811
|
+
children: [icon ? "display icon" : null, children ? children : /* @__PURE__ */jsx(Box, {
|
|
825
812
|
flex: 1,
|
|
826
|
-
children: /* @__PURE__ */
|
|
813
|
+
children: /* @__PURE__ */jsxs(Stack, {
|
|
827
814
|
space: 4,
|
|
828
|
-
children: [title ? /* @__PURE__ */
|
|
815
|
+
children: [title ? /* @__PURE__ */jsx(Text, {
|
|
829
816
|
weight: "semibold",
|
|
830
817
|
children: title
|
|
831
|
-
}) : null, description ? /* @__PURE__ */
|
|
818
|
+
}) : null, description ? /* @__PURE__ */jsx(Text, {
|
|
832
819
|
size: 2,
|
|
833
820
|
children: description
|
|
834
821
|
}) : null]
|
|
@@ -840,59 +827,59 @@ function Feedback(props) {
|
|
|
840
827
|
var __freeze = Object.freeze;
|
|
841
828
|
var __defProp = Object.defineProperty;
|
|
842
829
|
var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", {
|
|
843
|
-
value: __freeze(
|
|
830
|
+
value: __freeze(cooked.slice())
|
|
844
831
|
}));
|
|
845
832
|
var _a, _b, _c;
|
|
846
833
|
const TableWrapper = function () {
|
|
847
834
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
848
|
-
return /* @__PURE__ */
|
|
835
|
+
return /* @__PURE__ */jsx(Card, {
|
|
849
836
|
as: "table",
|
|
850
837
|
...props
|
|
851
838
|
});
|
|
852
839
|
};
|
|
853
|
-
const StyledTable =
|
|
840
|
+
const StyledTable = styled(TableWrapper)(() => css(_a || (_a = __template(["\n display: table;\n width: 100%;\n border-collapse: collapse;\n\n &:not([hidden]) {\n display: table;\n border-collapse: collapse;\n }\n "]))));
|
|
854
841
|
function Table(props) {
|
|
855
842
|
const {
|
|
856
843
|
children,
|
|
857
844
|
...rest
|
|
858
845
|
} = props;
|
|
859
|
-
return /* @__PURE__ */
|
|
846
|
+
return /* @__PURE__ */jsx(StyledTable, {
|
|
860
847
|
...rest,
|
|
861
848
|
children
|
|
862
849
|
});
|
|
863
850
|
}
|
|
864
851
|
const RowWrapper = function () {
|
|
865
852
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
866
|
-
return /* @__PURE__ */
|
|
853
|
+
return /* @__PURE__ */jsx(Card, {
|
|
867
854
|
as: "tr",
|
|
868
855
|
...props
|
|
869
856
|
});
|
|
870
857
|
};
|
|
871
|
-
const StyledRow =
|
|
858
|
+
const StyledRow = styled(RowWrapper)(() => css(_b || (_b = __template(["\n display: table-row;\n\n &:not([hidden]) {\n display: table-row;\n }\n "]))));
|
|
872
859
|
function Row(props) {
|
|
873
860
|
const {
|
|
874
861
|
children,
|
|
875
862
|
...rest
|
|
876
863
|
} = props;
|
|
877
|
-
return /* @__PURE__ */
|
|
864
|
+
return /* @__PURE__ */jsx(StyledRow, {
|
|
878
865
|
...rest,
|
|
879
866
|
children
|
|
880
867
|
});
|
|
881
868
|
}
|
|
882
869
|
const CellWrapper = function () {
|
|
883
870
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
884
|
-
return /* @__PURE__ */
|
|
871
|
+
return /* @__PURE__ */jsx(Card, {
|
|
885
872
|
as: "td",
|
|
886
873
|
...props
|
|
887
874
|
});
|
|
888
875
|
};
|
|
889
|
-
const StyledCell =
|
|
876
|
+
const StyledCell = styled(CellWrapper)(() => css(_c || (_c = __template(["\n display: table-cell;\n\n &:not([hidden]) {\n display: table-cell;\n }\n "]))));
|
|
890
877
|
function Cell(props) {
|
|
891
878
|
const {
|
|
892
879
|
children,
|
|
893
880
|
...rest
|
|
894
881
|
} = props;
|
|
895
|
-
return /* @__PURE__ */
|
|
882
|
+
return /* @__PURE__ */jsx(StyledCell, {
|
|
896
883
|
...rest,
|
|
897
884
|
children
|
|
898
885
|
});
|
|
@@ -930,11 +917,11 @@ function UserSelectMenu(props) {
|
|
|
930
917
|
...LABELS,
|
|
931
918
|
...props.labels
|
|
932
919
|
} : LABELS;
|
|
933
|
-
const [searchString, setSearchString] =
|
|
920
|
+
const [searchString, setSearchString] = React.useState("");
|
|
934
921
|
const searchResults = searchUsers(userList || [], searchString);
|
|
935
922
|
const me = userList.find(u => u.isCurrentUser);
|
|
936
923
|
const meAssigned = me && value.includes(me.id);
|
|
937
|
-
const input =
|
|
924
|
+
const input = useRef(null);
|
|
938
925
|
const handleSearchChange = event => {
|
|
939
926
|
setSearchString(event.target.value);
|
|
940
927
|
};
|
|
@@ -952,51 +939,51 @@ function UserSelectMenu(props) {
|
|
|
952
939
|
const handleClearAssigneesClick = () => {
|
|
953
940
|
if (onClear) onClear();
|
|
954
941
|
};
|
|
955
|
-
return /* @__PURE__ */
|
|
942
|
+
return /* @__PURE__ */jsxs(Menu, {
|
|
956
943
|
style,
|
|
957
|
-
children: [meAssigned ? /* @__PURE__ */
|
|
944
|
+
children: [meAssigned ? /* @__PURE__ */jsx(MenuItem, {
|
|
958
945
|
tone: "caution",
|
|
959
946
|
disabled: !me,
|
|
960
947
|
onClick: handleUnassignMyself,
|
|
961
|
-
icon:
|
|
948
|
+
icon: RemoveCircleIcon,
|
|
962
949
|
text: labels.removeMe
|
|
963
|
-
}) : /* @__PURE__ */
|
|
950
|
+
}) : /* @__PURE__ */jsx(MenuItem, {
|
|
964
951
|
tone: "positive",
|
|
965
952
|
onClick: handleAssignMyself,
|
|
966
|
-
icon:
|
|
953
|
+
icon: AddCircleIcon,
|
|
967
954
|
text: labels.addMe
|
|
968
|
-
}), /* @__PURE__ */
|
|
955
|
+
}), /* @__PURE__ */jsx(MenuItem, {
|
|
969
956
|
tone: "critical",
|
|
970
957
|
disabled: value.length === 0,
|
|
971
958
|
onClick: handleClearAssigneesClick,
|
|
972
|
-
icon:
|
|
959
|
+
icon: RestoreIcon,
|
|
973
960
|
text: labels.clear
|
|
974
|
-
}), /* @__PURE__ */
|
|
961
|
+
}), /* @__PURE__ */jsx(Box, {
|
|
975
962
|
padding: 1,
|
|
976
|
-
children: /* @__PURE__ */
|
|
963
|
+
children: /* @__PURE__ */jsx(TextInput, {
|
|
977
964
|
ref: input,
|
|
978
965
|
onChange: handleSearchChange,
|
|
979
966
|
placeholder: labels.searchPlaceholder,
|
|
980
967
|
value: searchString
|
|
981
968
|
})
|
|
982
|
-
}), searchString && (searchResults == null ? void 0 : searchResults.length) === 0 && /* @__PURE__ */
|
|
969
|
+
}), searchString && (searchResults == null ? void 0 : searchResults.length) === 0 && /* @__PURE__ */jsx(MenuItem, {
|
|
983
970
|
disabled: true,
|
|
984
971
|
text: labels.notFound
|
|
985
|
-
}), searchResults && searchResults.map(user => /* @__PURE__ */
|
|
972
|
+
}), searchResults && searchResults.map(user => /* @__PURE__ */jsx(MenuItem, {
|
|
986
973
|
pressed: value.includes(user.id),
|
|
987
974
|
onClick: () => handleSelect(value.indexOf(user.id) > -1, user),
|
|
988
|
-
children: /* @__PURE__ */
|
|
975
|
+
children: /* @__PURE__ */jsxs(Flex, {
|
|
989
976
|
align: "center",
|
|
990
|
-
children: [/* @__PURE__ */
|
|
977
|
+
children: [/* @__PURE__ */jsx(UserAvatar, {
|
|
991
978
|
user,
|
|
992
979
|
size: 1
|
|
993
|
-
}), /* @__PURE__ */
|
|
980
|
+
}), /* @__PURE__ */jsx(Box, {
|
|
994
981
|
paddingX: 2,
|
|
995
982
|
flex: 1,
|
|
996
|
-
children: /* @__PURE__ */
|
|
983
|
+
children: /* @__PURE__ */jsx(Text, {
|
|
997
984
|
children: user.displayName
|
|
998
985
|
})
|
|
999
|
-
}), user.isCurrentUser && /* @__PURE__ */
|
|
986
|
+
}), user.isCurrentUser && /* @__PURE__ */jsx(Badge, {
|
|
1000
987
|
fontSize: 1,
|
|
1001
988
|
tone: "positive",
|
|
1002
989
|
mode: "outline",
|
|
@@ -1006,14 +993,5 @@ function UserSelectMenu(props) {
|
|
|
1006
993
|
}, user.id))]
|
|
1007
994
|
});
|
|
1008
995
|
}
|
|
1009
|
-
|
|
1010
|
-
exports.Feedback = Feedback;
|
|
1011
|
-
exports.Row = Row;
|
|
1012
|
-
exports.Table = Table;
|
|
1013
|
-
exports.UserSelectMenu = UserSelectMenu;
|
|
1014
|
-
exports.useImageUrlBuilder = useImageUrlBuilder;
|
|
1015
|
-
exports.useImageUrlBuilderImage = useImageUrlBuilderImage;
|
|
1016
|
-
exports.useListeningQuery = useListeningQuery;
|
|
1017
|
-
exports.useOpenInNewPane = useOpenInNewPane;
|
|
1018
|
-
exports.useProjectUsers = useProjectUsers;
|
|
996
|
+
export { Cell, Feedback, Row, Table, UserSelectMenu, useImageUrlBuilder, useImageUrlBuilderImage, useListeningQuery, useOpenInNewPane, useProjectUsers };
|
|
1019
997
|
//# sourceMappingURL=index.js.map
|