Make creators split input show errors on invalid inputs and include InputNumber (#36)
This commit is contained in:
parent
dedb24faa7
commit
7a7d631621
|
@ -12,6 +12,7 @@ import {
|
|||
Spin,
|
||||
InputNumber,
|
||||
Form,
|
||||
Typography,
|
||||
} from 'antd';
|
||||
import { ArtCard } from './../../components/ArtCard';
|
||||
import { UserSearch, UserValue } from './../../components/UserSearch';
|
||||
|
@ -40,6 +41,7 @@ import useWindowDimensions from '../../utils/layout';
|
|||
|
||||
const { Step } = Steps;
|
||||
const { Dragger } = Upload;
|
||||
const { Text } = Typography;
|
||||
|
||||
export const ArtCreateView = () => {
|
||||
const connection = useConnection();
|
||||
|
@ -624,17 +626,15 @@ const InfoStep = (props: {
|
|||
);
|
||||
};
|
||||
|
||||
const shuffle = (array: Array<any>) => {
|
||||
array.sort(() => Math.random() - 0.5);
|
||||
};
|
||||
|
||||
const RoyaltiesSplitter = (props: {
|
||||
creators: Array<UserValue>;
|
||||
royalties: Array<Royalty>;
|
||||
setRoyalties: Function;
|
||||
isShowErrors?: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<Col>
|
||||
<Row gutter={[0, 24]}>
|
||||
{props.creators.map((creator, idx) => {
|
||||
const royalty = props.royalties.find(
|
||||
royalty => royalty.creatorKey === creator.key,
|
||||
|
@ -642,59 +642,58 @@ const RoyaltiesSplitter = (props: {
|
|||
if (!royalty) return null;
|
||||
|
||||
const amt = royalty.amount;
|
||||
const handleSlide = (newAmt: number) => {
|
||||
const othersRoyalties = props.royalties.filter(
|
||||
_royalty => _royalty.creatorKey !== royalty.creatorKey,
|
||||
);
|
||||
if (othersRoyalties.length < 1) return;
|
||||
shuffle(othersRoyalties);
|
||||
const others_n = props.royalties.length - 1;
|
||||
const sign = Math.sign(newAmt - amt);
|
||||
let remaining = Math.abs(newAmt - amt);
|
||||
let count = 0;
|
||||
while (remaining > 0 && count < 100) {
|
||||
const idx = count % others_n;
|
||||
const _royalty = othersRoyalties[idx];
|
||||
if (
|
||||
(0 < _royalty.amount && _royalty.amount < 100) || // Normal
|
||||
(_royalty.amount === 0 && sign < 0) || // Low limit
|
||||
(_royalty.amount === 100 && sign > 0) // High limit
|
||||
) {
|
||||
_royalty.amount -= sign;
|
||||
remaining -= 1;
|
||||
}
|
||||
count += 1;
|
||||
}
|
||||
|
||||
const handleChangeShare = (newAmt: number) => {
|
||||
props.setRoyalties(
|
||||
props.royalties.map(_royalty => {
|
||||
const computed_amount = othersRoyalties.find(
|
||||
newRoyalty => newRoyalty.creatorKey === _royalty.creatorKey,
|
||||
)?.amount;
|
||||
return {
|
||||
..._royalty,
|
||||
amount:
|
||||
_royalty.creatorKey === royalty.creatorKey
|
||||
? newAmt
|
||||
: computed_amount,
|
||||
: _royalty.amount,
|
||||
};
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Row key={idx} style={{ margin: '5px auto' }}>
|
||||
<Col span={24}>
|
||||
<Row
|
||||
key={idx}
|
||||
align="middle"
|
||||
gutter={[0, 16]}
|
||||
style={{ margin: '5px auto' }}
|
||||
>
|
||||
<Col span={4} style={{ padding: 10 }}>
|
||||
{creator.label}
|
||||
</Col>
|
||||
<Col span={2} className="slider-elem">
|
||||
{amt}%
|
||||
<Col span={3}>
|
||||
<InputNumber<number>
|
||||
min={0}
|
||||
max={100}
|
||||
formatter={value => `${value}%`}
|
||||
value={amt}
|
||||
parser={value => parseInt(value?.replace('%', '') ?? '0')}
|
||||
onChange={handleChangeShare}
|
||||
className="royalties-input"
|
||||
/>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Slider value={amt} onChange={handleSlide} />
|
||||
<Col span={4} style={{ paddingLeft: 12 }}>
|
||||
<Slider value={amt} onChange={handleChangeShare} />
|
||||
</Col>
|
||||
{props.isShowErrors && amt === 0 && (
|
||||
<Col style={{ paddingLeft: 12 }}>
|
||||
<Text type="danger">
|
||||
The split percentage for this creator cannot be 0%.
|
||||
</Text>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
@ -710,7 +709,9 @@ const RoyaltiesStep = (props: {
|
|||
const [creators, setCreators] = useState<Array<UserValue>>([]);
|
||||
const [fixedCreators, setFixedCreators] = useState<Array<UserValue>>([]);
|
||||
const [royalties, setRoyalties] = useState<Array<Royalty>>([]);
|
||||
const [totalRoyaltyShares, setTotalRoyaltiesShare] = useState<number>(0);
|
||||
const [showCreatorsModal, setShowCreatorsModal] = useState<boolean>(false);
|
||||
const [isShowErrors, setIsShowErrors] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (wallet?.publicKey) {
|
||||
|
@ -734,6 +735,15 @@ const RoyaltiesStep = (props: {
|
|||
);
|
||||
}, [creators, fixedCreators]);
|
||||
|
||||
useEffect(() => {
|
||||
// When royalties changes, sum up all the amounts.
|
||||
const total = royalties.reduce((totalShares, royalty) => {
|
||||
return totalShares + royalty.amount;
|
||||
}, 0);
|
||||
|
||||
setTotalRoyaltiesShare(total);
|
||||
}, [royalties]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row className="call-to-action" style={{ marginBottom: 20 }}>
|
||||
|
@ -777,6 +787,7 @@ const RoyaltiesStep = (props: {
|
|||
creators={[...fixedCreators, ...creators]}
|
||||
royalties={royalties}
|
||||
setRoyalties={setRoyalties}
|
||||
isShowErrors={isShowErrors}
|
||||
/>
|
||||
</label>
|
||||
</Row>
|
||||
|
@ -819,11 +830,30 @@ const RoyaltiesStep = (props: {
|
|||
</label>
|
||||
</MetaplexModal>
|
||||
</Row>
|
||||
{isShowErrors && totalRoyaltyShares !== 100 && (
|
||||
<Row>
|
||||
<Text type="danger" style={{ paddingBottom: 14 }}>
|
||||
The split percentages for each creator must add up to 100%. Current
|
||||
total split percentage is {totalRoyaltyShares}%.
|
||||
</Text>
|
||||
</Row>
|
||||
)}
|
||||
<Row>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={() => {
|
||||
// Find all royalties that are invalid (0)
|
||||
const zeroedRoyalties = royalties.filter(
|
||||
royalty => royalty.amount === 0,
|
||||
);
|
||||
|
||||
if (zeroedRoyalties.length !== 0 || totalRoyaltyShares !== 100) {
|
||||
// Contains a share that is 0 or total shares does not equal 100, show errors.
|
||||
setIsShowErrors(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const creatorStructs: Creator[] = [
|
||||
...fixedCreators,
|
||||
...creators,
|
||||
|
|
Loading…
Reference in New Issue