mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-11-10 18:21:34 +03:00
Matilde Park
parent
ae5561ee61
commit
278f5b4369
180
pkg/interface/package-lock.json
generated
180
pkg/interface/package-lock.json
generated
@ -1585,22 +1585,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@react-dnd/asap": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
|
||||
"integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ=="
|
||||
},
|
||||
"@react-dnd/invariant": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
|
||||
"integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw=="
|
||||
},
|
||||
"@react-dnd/shallowequal": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
|
||||
"integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==",
|
||||
"dev": true
|
||||
},
|
||||
"@styled-system/background": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz",
|
||||
@ -3909,21 +3893,6 @@
|
||||
"randombytes": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"dnd-core": {
|
||||
"version": "11.1.3",
|
||||
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-11.1.3.tgz",
|
||||
"integrity": "sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==",
|
||||
"requires": {
|
||||
"@react-dnd/asap": "^4.0.0",
|
||||
"@react-dnd/invariant": "^2.0.0",
|
||||
"redux": "^4.0.4"
|
||||
}
|
||||
},
|
||||
"dnd-multi-backend": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dnd-multi-backend/-/dnd-multi-backend-6.0.0.tgz",
|
||||
"integrity": "sha512-qfUO4V0IACs24xfE9m9OUnwIzoL+SWzSiFbKVIHE0pFddJeZ93BZOdHS1XEYr8X3HNh+CfnfjezXgOMgjvh74g=="
|
||||
},
|
||||
"dns-equal": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
|
||||
@ -7872,53 +7841,6 @@
|
||||
"resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-6.0.1.tgz",
|
||||
"integrity": "sha512-rutEKVgvFhWcy/GeVA1hFbqrO89qLqgqdhUr7YhYgIzdyICdlRQv+ztuNvOFQMXrO0fLt0VkaYOdMdYdQgsSUA=="
|
||||
},
|
||||
"react-dnd": {
|
||||
"version": "11.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-11.1.3.tgz",
|
||||
"integrity": "sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@react-dnd/shallowequal": "^2.0.0",
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"dnd-core": "^11.1.3",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"react-dnd-html5-backend": {
|
||||
"version": "11.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-11.1.3.tgz",
|
||||
"integrity": "sha512-/1FjNlJbW/ivkUxlxQd7o3trA5DE33QiRZgxent3zKme8DwF4Nbw3OFVhTRFGaYhHFNL1rZt6Rdj1D78BjnNLw==",
|
||||
"requires": {
|
||||
"dnd-core": "^11.1.3"
|
||||
}
|
||||
},
|
||||
"react-dnd-multi-backend": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dnd-multi-backend/-/react-dnd-multi-backend-6.0.2.tgz",
|
||||
"integrity": "sha512-SwpqRv0HkJYu244FbHf9NbvGzGy14Ir9wIAhm909uvOVaHgsOq6I1THMSWSgpwUI31J3Bo5uS19tuvGpVPjzZw==",
|
||||
"requires": {
|
||||
"dnd-multi-backend": "^6.0.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-dnd-preview": "^6.0.2"
|
||||
}
|
||||
},
|
||||
"react-dnd-preview": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dnd-preview/-/react-dnd-preview-6.0.2.tgz",
|
||||
"integrity": "sha512-F2+uK4Be+q+7mZfNh9kaZols7wp1hX6G7UBTVaTpDsBpMhjFvY7/v7odxYSerSFBShh23MJl33a4XOVRFj1zoQ==",
|
||||
"requires": {
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"react-dnd-touch-backend": {
|
||||
"version": "11.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-dnd-touch-backend/-/react-dnd-touch-backend-11.1.3.tgz",
|
||||
"integrity": "sha512-8lz4fxfYwUuJ6Y2seQYwh8+OfwKcbBX0CIbz7AwXfBYz54Wg2nIDU6CP8Dyybt/Wyx4D3oXmTPEaOMB62uqJvQ==",
|
||||
"requires": {
|
||||
"@react-dnd/invariant": "^2.0.0",
|
||||
"dnd-core": "^11.1.3"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
|
||||
@ -8095,15 +8017,6 @@
|
||||
"picomatch": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"redux": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
|
||||
"integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"symbol-observable": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"regenerate": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
|
||||
@ -9446,11 +9359,6 @@
|
||||
"xml-reader": "2.4.3"
|
||||
}
|
||||
},
|
||||
"symbol-observable": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
|
||||
"integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
|
||||
},
|
||||
"synchronous-promise": {
|
||||
"version": "2.0.13",
|
||||
"resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.13.tgz",
|
||||
@ -10204,8 +10112,7 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@ -10226,14 +10133,12 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -10248,20 +10153,17 @@
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -10378,8 +10280,7 @@
|
||||
"inherits": {
|
||||
"version": "2.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -10391,7 +10292,6 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -10406,7 +10306,6 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -10414,14 +10313,12 @@
|
||||
"minimist": {
|
||||
"version": "1.2.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.9.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@ -10440,7 +10337,6 @@
|
||||
"version": "0.5.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "^1.2.5"
|
||||
}
|
||||
@ -10502,8 +10398,7 @@
|
||||
"npm-normalize-package-bin": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"npm-packlist": {
|
||||
"version": "1.4.8",
|
||||
@ -10531,8 +10426,7 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -10544,7 +10438,6 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -10622,8 +10515,7 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@ -10659,7 +10551,6 @@
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@ -10679,7 +10570,6 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@ -10723,14 +10613,12 @@
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -11211,8 +11099,7 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@ -11233,14 +11120,12 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -11255,20 +11140,17 @@
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -11385,8 +11267,7 @@
|
||||
"inherits": {
|
||||
"version": "2.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -11398,7 +11279,6 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -11413,7 +11293,6 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -11421,14 +11300,12 @@
|
||||
"minimist": {
|
||||
"version": "1.2.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.9.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@ -11447,7 +11324,6 @@
|
||||
"version": "0.5.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "^1.2.5"
|
||||
}
|
||||
@ -11509,8 +11385,7 @@
|
||||
"npm-normalize-package-bin": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"npm-packlist": {
|
||||
"version": "1.4.8",
|
||||
@ -11538,8 +11413,7 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -11551,7 +11425,6 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -11629,8 +11502,7 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@ -11666,7 +11538,6 @@
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@ -11686,7 +11557,6 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@ -11730,14 +11600,12 @@
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -26,9 +26,6 @@
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.5.2",
|
||||
"react-codemirror2": "^6.0.1",
|
||||
"react-dnd-html5-backend": "^11.1.3",
|
||||
"react-dnd-multi-backend": "^6.0.2",
|
||||
"react-dnd-touch-backend": "^11.1.3",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-markdown": "^4.3.1",
|
||||
@ -73,7 +70,6 @@
|
||||
"file-loader": "^6.0.0",
|
||||
"html-webpack-plugin": "^4.2.0",
|
||||
"moment-locales-webpack-plugin": "^1.2.0",
|
||||
"react-dnd": "^11.1.3",
|
||||
"react-hot-loader": "^4.12.21",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2",
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import BaseApi from './base';
|
||||
import { StoreState } from '../store/type';
|
||||
|
||||
|
||||
export default class LaunchApi extends BaseApi<StoreState> {
|
||||
|
||||
add(name: string, tile = { basic : { title: '', linkedUrl: '', iconUrl: '' }}) {
|
||||
return this.launchAction({ add: { name, tile } });
|
||||
}
|
||||
@ -12,10 +10,6 @@ export default class LaunchApi extends BaseApi<StoreState> {
|
||||
return this.launchAction({ remove: name });
|
||||
}
|
||||
|
||||
changeOrder(orderedTiles: string[] = []) {
|
||||
return this.launchAction({ 'change-order': orderedTiles });
|
||||
}
|
||||
|
||||
changeFirstTime(firstTime = true) {
|
||||
return this.launchAction({ 'change-first-time': firstTime });
|
||||
}
|
||||
@ -31,6 +25,5 @@ export default class LaunchApi extends BaseApi<StoreState> {
|
||||
private launchAction(data) {
|
||||
return this.action('launch', 'launch-action', data);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1,34 +1,28 @@
|
||||
import React from "react";
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Box,
|
||||
Label,
|
||||
ManagedCheckboxField as Checkbox,
|
||||
Button,
|
||||
} from "@tlon/indigo-react";
|
||||
import { Formik, Form } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import _ from "lodash";
|
||||
Button
|
||||
} from '@tlon/indigo-react';
|
||||
import { Formik, Form } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
|
||||
import GlobalApi from "../../../../api/global";
|
||||
import { LaunchState } from "../../../../types/launch-update";
|
||||
import { DropLaunchTiles } from "./DropLaunch";
|
||||
import { S3State, BackgroundConfig } from "../../../../types";
|
||||
import { BackgroundPicker, BgType } from "./BackgroundPicker";
|
||||
import GlobalApi from '~/logic/api/global';
|
||||
import { S3State, BackgroundConfig } from '~/types';
|
||||
import { BackgroundPicker, BgType } from './BackgroundPicker';
|
||||
|
||||
const formSchema = Yup.object().shape({
|
||||
tileOrdering: Yup.array().of(Yup.string()),
|
||||
bgType: Yup.string()
|
||||
.oneOf(["none", "color", "url"], "invalid")
|
||||
.required("Required"),
|
||||
.oneOf(['none', 'color', 'url'], 'invalid')
|
||||
.required('Required'),
|
||||
bgUrl: Yup.string().url(),
|
||||
bgColor: Yup.string().matches(/#([A-F]|[a-f]|[0-9]){6}/, "Invalid color"),
|
||||
bgColor: Yup.string().matches(/#([A-F]|[a-f]|[0-9]){6}/, 'Invalid color'),
|
||||
avatars: Yup.boolean(),
|
||||
nicknames: Yup.boolean(),
|
||||
nicknames: Yup.boolean()
|
||||
});
|
||||
|
||||
interface FormSchema {
|
||||
tileOrdering: string[];
|
||||
bgType: BgType;
|
||||
bgColor: string | undefined;
|
||||
bgUrl: string | undefined;
|
||||
@ -38,7 +32,6 @@ interface FormSchema {
|
||||
|
||||
interface DisplayFormProps {
|
||||
api: GlobalApi;
|
||||
launch: LaunchState;
|
||||
dark: boolean;
|
||||
background: BackgroundConfig;
|
||||
hideAvatars: boolean;
|
||||
@ -47,16 +40,16 @@ interface DisplayFormProps {
|
||||
}
|
||||
|
||||
export default function DisplayForm(props: DisplayFormProps) {
|
||||
const { api, launch, background, hideAvatars, hideNicknames, s3 } = props;
|
||||
const { api, background, hideAvatars, hideNicknames, s3 } = props;
|
||||
|
||||
let bgColor, bgUrl;
|
||||
if (background?.type === "url") {
|
||||
if (background?.type === 'url') {
|
||||
bgUrl = background.url;
|
||||
}
|
||||
if (background?.type === "color") {
|
||||
if (background?.type === 'color') {
|
||||
bgColor = background.color;
|
||||
}
|
||||
const bgType = background?.type || "none";
|
||||
const bgType = background?.type || 'none';
|
||||
|
||||
return (
|
||||
<Formik
|
||||
@ -67,18 +60,15 @@ export default function DisplayForm(props: DisplayFormProps) {
|
||||
bgColor,
|
||||
bgUrl,
|
||||
avatars: hideAvatars,
|
||||
nicknames: hideNicknames,
|
||||
tileOrdering: launch.tileOrdering,
|
||||
nicknames: hideNicknames
|
||||
} as FormSchema
|
||||
}
|
||||
onSubmit={(values, actions) => {
|
||||
api.launch.changeOrder(values.tileOrdering);
|
||||
|
||||
const bgConfig: BackgroundConfig =
|
||||
values.bgType === "color"
|
||||
? { type: "color", color: values.bgColor || "" }
|
||||
: values.bgType === "url"
|
||||
? { type: "url", url: values.bgUrl || "" }
|
||||
values.bgType === 'color'
|
||||
? { type: 'color', color: values.bgColor || '' }
|
||||
: values.bgType === 'url'
|
||||
? { type: 'url', url: values.bgUrl || '' }
|
||||
: undefined;
|
||||
|
||||
api.local.setBackground(bgConfig);
|
||||
@ -88,7 +78,7 @@ export default function DisplayForm(props: DisplayFormProps) {
|
||||
actions.setSubmitting(false);
|
||||
}}
|
||||
>
|
||||
{(props) => (
|
||||
{props => (
|
||||
<Form>
|
||||
<Box
|
||||
display="grid"
|
||||
@ -99,17 +89,6 @@ export default function DisplayForm(props: DisplayFormProps) {
|
||||
<Box color="black" fontSize={1} mb={3} fontWeight={900}>
|
||||
Display Preferences
|
||||
</Box>
|
||||
<Box mb={2}>
|
||||
<Label display="block" pb={2}>
|
||||
Tile Order
|
||||
</Label>
|
||||
<DropLaunchTiles
|
||||
id="tileOrdering"
|
||||
name="tileOrdering"
|
||||
tiles={launch.tiles}
|
||||
order={launch.tileOrdering}
|
||||
/>
|
||||
</Box>
|
||||
<BackgroundPicker
|
||||
bgType={props.values.bgType}
|
||||
bgUrl={props.values.bgUrl}
|
||||
|
||||
@ -1,127 +0,0 @@
|
||||
import React, { useMemo } from "react";
|
||||
import { useDrag } from "react-dnd";
|
||||
import { usePreview } from "react-dnd-multi-backend";
|
||||
import { capitalize } from "lodash";
|
||||
import { TileTypeBasic, Tile } from "../../../../types/launch-update";
|
||||
|
||||
import { Box, Image as _Image, Text } from "@tlon/indigo-react";
|
||||
import styled from "styled-components";
|
||||
|
||||
// Need to change dojo image
|
||||
const Image = styled(_Image)<{ invert?: boolean }>`
|
||||
${(p) =>
|
||||
p.theme.colors.white !== "rgba(255,255,255,1)" ? `filter: invert(1);` : ``}
|
||||
|
||||
${(p) =>
|
||||
!p.invert
|
||||
? ``
|
||||
: p.theme.colors.white !== "rgba(255,255,255,1)"
|
||||
? `
|
||||
filter: invert(0);
|
||||
`
|
||||
: `filter: invert(1);`}
|
||||
`;
|
||||
|
||||
interface DragTileProps {
|
||||
index: number;
|
||||
tile: Tile;
|
||||
title: string;
|
||||
style?: any;
|
||||
}
|
||||
|
||||
function DragTileBox({ title, index, tile, ...props }: any) {
|
||||
const [, dragRef] = useDrag({
|
||||
item: { type: "launchTile", index, tile, title },
|
||||
collect: (monitor) => ({}),
|
||||
});
|
||||
|
||||
return (
|
||||
<Box
|
||||
ref={dragRef}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="space-around"
|
||||
flexDirection="column"
|
||||
border={1}
|
||||
borderColor="black"
|
||||
height="100%"
|
||||
width="100%"
|
||||
style={{ cursor: "move" }}
|
||||
{...props}
|
||||
></Box>
|
||||
);
|
||||
}
|
||||
|
||||
function DragTileCustom({ index, title, style }: any) {
|
||||
const tile = { type: { custom: null } };
|
||||
return (
|
||||
<DragTileBox
|
||||
bg="white"
|
||||
style={style}
|
||||
title={title}
|
||||
tile={tile}
|
||||
index={index}
|
||||
>
|
||||
<Text fontSize={1}>{capitalize(title)}</Text>
|
||||
</DragTileBox>
|
||||
);
|
||||
}
|
||||
|
||||
function DragTileBasic(props: {
|
||||
tile: TileTypeBasic;
|
||||
index: number;
|
||||
style: any;
|
||||
}) {
|
||||
const { basic: tile } = props.tile;
|
||||
const isDojo = useMemo(() => tile.title === "Dojo", [tile.title]);
|
||||
return (
|
||||
<DragTileBox
|
||||
tile={{ type: props.tile }}
|
||||
index={props.index}
|
||||
bg={
|
||||
"white" // isDojo ? "black" : "white"
|
||||
}
|
||||
style={props.style}
|
||||
>
|
||||
<Image width="48px" height="48px" src={tile.iconUrl} invert={isDojo} />
|
||||
<Text
|
||||
color={
|
||||
"black" // isDojo ? "white" : "black"
|
||||
}
|
||||
>
|
||||
{tile.title}
|
||||
</Text>
|
||||
</DragTileBox>
|
||||
);
|
||||
}
|
||||
|
||||
export function DragTile(props: DragTileProps) {
|
||||
if ("basic" in props.tile.type) {
|
||||
return (
|
||||
<DragTileBasic
|
||||
index={props.index}
|
||||
style={props.style}
|
||||
tile={props.tile.type}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<DragTileCustom
|
||||
style={props.style}
|
||||
title={props.title}
|
||||
index={props.index}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function DragTilePreview() {
|
||||
let { display, style, item } = usePreview();
|
||||
|
||||
if (!display) {
|
||||
return null;
|
||||
}
|
||||
|
||||
style = { ...style, height: "96px", width: "96px", "z-index": "5" };
|
||||
return <DragTile style={style} {...item} />;
|
||||
}
|
||||
@ -1,85 +0,0 @@
|
||||
import React, { useCallback, ReactNode } from "react";
|
||||
import { useDrop } from "react-dnd";
|
||||
import { DndProvider, usePreview } from "react-dnd-multi-backend";
|
||||
import HTML5toTouch from "react-dnd-multi-backend/dist/esm/HTML5toTouch";
|
||||
import { Box } from "@tlon/indigo-react";
|
||||
|
||||
import { DragTile, DragTilePreview } from "./DragTile";
|
||||
import { useField } from "formik";
|
||||
|
||||
function DropLaunchTile({
|
||||
children,
|
||||
index,
|
||||
didDrop,
|
||||
}: {
|
||||
index: number;
|
||||
children: ReactNode;
|
||||
didDrop: (item: number, location: number) => void;
|
||||
}) {
|
||||
const onDrop = useCallback(
|
||||
(item: any, monitor: any) => {
|
||||
didDrop(item.index, index);
|
||||
},
|
||||
[index, didDrop]
|
||||
);
|
||||
|
||||
const { display, style, item } = usePreview();
|
||||
|
||||
const [{ isOver }, drop] = useDrop({
|
||||
accept: "launchTile",
|
||||
drop: onDrop,
|
||||
collect: (monitor) => ({
|
||||
isOver: !!monitor.isOver(),
|
||||
}),
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={drop}
|
||||
style={{
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DropLaunchTiles({ tiles, name }: any) {
|
||||
const [field, meta, helpers] = useField<string[]>(name);
|
||||
|
||||
const { value } = meta;
|
||||
const { setValue } = helpers;
|
||||
|
||||
const onChange = useCallback(
|
||||
(x: number, y: number) => {
|
||||
// swap tiles
|
||||
let t = value.slice();
|
||||
const c = t[x];
|
||||
t[x] = t[y];
|
||||
t[y] = c;
|
||||
setValue(t);
|
||||
},
|
||||
[setValue, value]
|
||||
);
|
||||
|
||||
return (
|
||||
<DndProvider options={HTML5toTouch}>
|
||||
<Box
|
||||
display="grid"
|
||||
gridGap={2}
|
||||
gridTemplateColumns={["96px 96px", "96px 96px 96px 96px"]}
|
||||
gridAutoRows="96px"
|
||||
>
|
||||
<DragTilePreview />
|
||||
{value.map((tile, i) => (
|
||||
<DropLaunchTile didDrop={onChange} key={`${i}-${tile}`} index={i}>
|
||||
<DragTile title={tile} tile={tiles[tile]} index={i} />
|
||||
</DropLaunchTile>
|
||||
))}
|
||||
</Box>
|
||||
</DndProvider>
|
||||
);
|
||||
}
|
||||
@ -1,31 +1,18 @@
|
||||
import React from "react";
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Box,
|
||||
Text,
|
||||
Button,
|
||||
Col,
|
||||
Input,
|
||||
InputLabel,
|
||||
Radio,
|
||||
Checkbox,
|
||||
} from "@tlon/indigo-react";
|
||||
import * as Yup from "yup";
|
||||
import { Formik, Form } from "formik";
|
||||
import _ from "lodash";
|
||||
import { Box } from '@tlon/indigo-react';
|
||||
|
||||
import GlobalApi from "../../../api/global";
|
||||
import { StoreState } from "../../../store/type";
|
||||
import DisplayForm from "./lib/DisplayForm";
|
||||
import S3Form from "./lib/S3Form";
|
||||
import SecuritySettings from "./lib/Security";
|
||||
import RemoteContentForm from "./lib/RemoteContent";
|
||||
import GlobalApi from '~/logic/api/global';
|
||||
import { StoreState } from '~/logic/store/type';
|
||||
import DisplayForm from './lib/DisplayForm';
|
||||
import S3Form from './lib/S3Form';
|
||||
import SecuritySettings from './lib/Security';
|
||||
import RemoteContentForm from './lib/RemoteContent';
|
||||
|
||||
type ProfileProps = StoreState & { api: GlobalApi; ship: string };
|
||||
|
||||
export default function Settings({
|
||||
api,
|
||||
launch,
|
||||
s3,
|
||||
dark,
|
||||
hideAvatars,
|
||||
@ -45,14 +32,13 @@ export default function Settings({
|
||||
>
|
||||
<DisplayForm
|
||||
api={api}
|
||||
launch={launch}
|
||||
dark={dark}
|
||||
hideNicknames={hideNicknames}
|
||||
hideAvatars={hideAvatars}
|
||||
background={background}
|
||||
s3={s3}
|
||||
/>
|
||||
<RemoteContentForm {...{api, remoteContentPolicy}} />
|
||||
<RemoteContentForm {...{ api, remoteContentPolicy }} />
|
||||
<S3Form api={api} s3={s3} />
|
||||
<SecuritySettings api={api} />
|
||||
</Box>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user